时间戳

首页 > 解决方案 > 如何将函数作为道具传递到路由 React js？

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

问题描述

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

所以这就是我想要做的。

在 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

登录.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() 但收到错误消息：

在此处输入图像描述

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

标签： javascriptreactjsparameter-passingreact-props

解决方案

你的错误在这里

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

您正在使用具有功能的component道具。render但根据文档，

警告：<Route component>优先于<Route render>所以不要在同一个<Route>.

要解决，请删除component道具。render道具会做它的工作。

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

推荐阅读