React：将作为道具接收的函数传递给另一个函数

Question

函数 signOut 由其父 App 定义并传递给无状态 Header 组件，如下所示；

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.signOut = this.signOut.bind(this);
  }

  signOut() {
    this.setState({
      auth: null,
    });
  }

  render() {
    return (
      <div>
        <Header signOut={this.signOut} />
      </div>
    );
  }
}

Header 在它之外定义了几个函数，我想进一步将 signOut 传递给这些函数，理想情况下就像我在下面演示的那样，但现在，它是错误的。

//one of several functions defined to be used inside header
function nav() {
  return localStorage.getItem("token") ? (
    <p>hii</p>
  ) : (
    <div className="linkWrapper">
      <Link className="link" to="/login">
        Login
      </Link>
      <Link className="link" to="/admin">
        Admin
      </Link>
      //signOut used here. 
      <div className="link" onClick={this.props.signOut}>
        Logout
      </div>
    </div>
  );
}

const Header = (props) => (
  <div className="headerWrapper">
    {nav()}
  </div>
);

export default Header;

如何从 Header 正确地将 sighOut 传递给这些函数？这甚至是一件事吗？谢谢！

Answer 1

您不想调用一个函数您想要render一个功能组件并将属性传递给它:

function Nav(props) {
  // use props.signOut
  return ...
}

const Header = (props) => (
  <div className="headerWrapper">
    <Nav signOut={props.signOut}/>
  </div>
);

Answer 2

因为您没有将 Header 声明为 class，所以不应使用关键字 {this} 调用 props。另外，将道具从 { Header } 传递到 { nav } （如果它在 Header 之外......）

const Header = (props) => (
    <div className="headerWrapper">
      {nav(props)}
    </div>
    );
export default Header;


function nav(props) {
 return localStorage.getItem("token") ? (
  <p>hii</p>
   ) : (
  <div className="linkWrapper">
    <Link className="link" to="/login">
      Login
    </Link>
    <Link className="link" to="/admin">
      Admin
    </Link>
    //signOut used here. 
    <div className="link" onClick={props.signOut}>
      Logout
    </div>
  </div>
);

}

Answer 3

如果你想传递一个变量（可能是一个函数），你需要将它作为 prop 传递给子组件。

请注意，名称是根据父组件的传递名称确定的：

function Nav(props) {
  return (
    <div className="link" onClick={props.signOut}>
      Logout
    </div>
  );
}


function Header(props) {
 return (
   <Nav
     signOut={props.headerSignOut}
   />
 );
}


function App() {
  function originalSignOutFunction() {
    console.log('Signed out');
  }

  return (
    <Header
      headerSignOut={originalSignOutFunction}
    />
  );
}

Answer 4

给nav()一个注销参数：

function link({to, signOut, text}) {
  <Link className="link" to={{
    pathname: to,
    state: {
      signOut
    }
  }}>
  </Link
}
function nav({ signOut }) {
  return localStorage.getItem("token") ? (
    <p>hii</p>
  ) : (
    <div className="linkWrapper">
      <link to="/admin" signOut={signOut} text={"Admin"} />
      <link to="/login" signOut={signOut} text={"Login"} />
      <div className="link" onClick={signOut}>
        Logout
      </div>
    </div>
  );
}
const Header = (props) => (
  <div className="headerWrapper">
    <nav signOut={props.signOut} />
  </div>
);

React：将作为道具接收的函数传递给另一个函数

React: Passing a function received as props to another function

reactjs

react-props