Question

我有一个父组件“ 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);

LogoutButton：

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动作作为道具传递？

Answer 1

我看到了几个问题：

您的操作setIsLoggedIn和回调道具的名称相同。
您需要使用箭头函数来访问此内容，另一种选择是在构造函数上绑定此上下文
您不需要连接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);

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

1 个答案: