如何将函数作为道具传递到路由 React js？

Question

我查看了许多其他堆栈溢出问题，这些问题看起来与我的问题相似，但都没有任何帮助。

这就是我想要做的。

在 App.js 中： 基本上我做了一个函数 singedInToggleHandler ，我想在链接页面中使用它。

signedInToggleHandler = () => {
    this.setState( (prev) => {
      return {signedIn: !prev.signedIn};
    });
  };

<Route path = '/Login' component = {LoginScreen} 
                render = { (props) => (<LoginScreen SignedInToggleHandler = {this.signedInToggleHandler}/>)}/>

上面最后一行是我如何传入函数的。

然后我访问它 LoginScreen.js

 formType = <SignIn SignedInHandler = {props.SignedInToggleHandler}/>

仅将其传递给另一个组件 SignIn.js

SignIn.js

function handleSubmit(event){
        console.log("Submitted");
        event.preventDefault();
        console.log(email,password);
        const user = SignIn(email,password);
        console.log(user);
        props.SignedInToggleHandler();
    }

现在这是我访问它的最后一个地方。在这里我想使用从 App.js 获得的 SignedInToggleHandler() 但我收到错误消息：

非常感谢您的宝贵时间和帮助！

Answer 1

你的错误在这里

<Route path = '/Login' component = {LoginScreen} 
                render = { (props) => (<LoginScreen SignedInToggleHandler = {this.signedInToggleHandler}/>)}/>

您正在使用带有 render 函数的 component 道具。但根据doc，

警告：<Route component> 优先于 <Route render>，因此不要在同一 <Route> 中使用两者。

要解决此问题，请删除 component 属性。 render prop 会起作用的。

<Route path = '/Login' 
                    render = { (props) => (<LoginScreen SignedInToggleHandler = {this.signedInToggleHandler}/>)}/>