时间戳

首页 > 解决方案 > 尝试将 redux 操作作为道具传递给子组件

reactjs - 尝试将 redux 操作作为道具传递给子组件

问题描述

我有一个父组件“Header”，其中包含一个子组件“LogoutButton”，

代码： 标题：

import LogoutButton from "./HeaderComps/LogoutButton";
import { setIsLoggedIn } from "../redux/action";
import { connect } from "react-redux";

class Header extends Component {
handleLogOut() {
const { setIsLoggedIn } = this.props;
   setIsLoggedIn(x,y,z)
  }


render() {
    return (
      <LogoutButton click={this.handleLogOut}/>
    );
  }


}


export default connect(
  state => ({
    isLoggedIn: state.isLoggedIn,
    isAdmin: state.isAdmin,
    userName: state.userName
  }),
  { setIsLoggedIn }
)(Header);

注销按钮：

import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import { setIsLoggedIn } from "../../redux/action";
import { connect } from "react-redux";

function LogoutButton(props) {
  return (
    <button
      type="button"
      className="btn btn-warning"
      id="LogoutButton"
      onClick={props.click}
    >
      Log out
    </button>
  );
}

export default connect(
  state => ({
    isLoggedIn: state.isLoggedIn,
    isAdmin: state.isAdmin,
    userName: state.userName
  }),
  { setIsLoggedIn }
)(LogoutButton);

如您所见， setIsLoggedIn()是来自 redux 的一个动作，它有效。我想要做的是在点击LogoutButton时让它工作。我试图将它作为道具传递，但它没有任何影响......有没有办法将 redux 动作作为道具传递？

标签： reactjsreact-redux

解决方案

我可以看到几个问题：

  1. 您的操作 setIsLoggedIn 和回调道具具有相同的名称。
  2. 您需要使用箭头函数来访问 this，其他选项是在构造函数上绑定 this 上下文
  3. 你不需要连接你的 Header 组件
import LogoutButton from "./HeaderComps/LogoutButton";

class Header extends Component {

render() {
    return (
      <LogoutButton />
    );
  }
}

import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import { setIsLoggedIn as setIsLoggedInAction  } from "../../redux/action";
import { connect } from "react-redux";

function LogoutButton(props) {
  return (
    <button
      type="button"
      className="btn btn-warning"
      id="LogoutButton"
      onClick={props.setIsLoggedIn}
    >
      Log out
    </button>
  );
}

export default connect(
  state => ({
    isLoggedIn: state.isLoggedIn,
    isAdmin: state.isAdmin,
    userName: state.userName
  }),
  { setIsLoggedIn: setIsLoggedInAction }
)(LogoutButton);

推荐阅读