Question

函数signOut是由其父级Header定义并传递给无状态App组件的；

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;

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

Answer 1

您不想调用功能，而不想 render一个功能组件并将属性传递给它：

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

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

Answer 2

因为您尚未将Header声明为类，所以建议不要使用关键字{this}来调用props。另外，将道具从{标头}传递到{导航}（如果它在标头之外...）

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

如果要传递变量（可能是函数），则需要将其作为道具传递给子组件。

请注意，该名称取决于父组件的传递名称：

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

给jupyter nbconvert --to python app.ipynb一个退出参数：

nav()

反应：将作为道具接收的功能传递给另一个功能

4 个答案: