如何使用 React JS 中的反应路由器链接将函数传递给另一个组件答案

【问题标题】：How to pass a function to another component using react router Link in React JS如何使用 React JS 中的反应路由器链接将函数传递给另一个组件
【发布时间】：2021-05-12 10:43:24
【问题描述】：

我是 React js 的新手。我正在使用反应类组件，在这里我需要使用 Link 将函数传递给另一个组件。我知道这是一个较老的问题，但我没有给出任何适当的解决方案，这就是我发布新问题的原因。

myFunction=()=>{
    console.log("calling..")
}

<Link 
   to={{
   pathname: '/category',
     state:{
        myFunction: this.myFunction
     }
}}>View Category</Link>

这是我的路线 -

<Route path="/category" render={(routeProps)=>
    <Editor myFunction={routeProps.myFunction} {...routeProps} />
}/>

这就是我如何调用上面的传递函数 this.props.location.state.myFunction();

但这给了我以下错误-

DataCloneError: 无法在“历史”上执行“pushState”：无法克隆函数 () { [本机代码] }。

请任何人帮助我..提前谢谢

【问题讨论】：

你能解释一下用例吗，为什么你不能在Route里面传递myFunction: myFunction？
@TJ 感谢您的回复。我的要求是我在一个组件中定义了一个函数“myFunction”，我想从另一个类别组件中使用该函数。我正在使用呈现类别组件。所以我使用上面的链接状态传递“myFunction”。但它给了我错误。
为什么不导出这个函数，从其他comoponet导入呢？
不，我不想在这种情况下使用导出，导入...我只想从类别组件中以 this.props.location.state.myFunction() 的方式调用此函数。

标签： reactjs react-router

【解决方案1】：

你应该从下面的函数中返回一些东西，而不是检查 console.log

myFunction=()=>{ return {name:"xxxx"} }

在路由状态下通过this.myFunction()。

<Link to={{ pathname: '/category', state: { myFunction : this.myFunction() }}}>View Category</Link>

检查导航组件的结果为this.props.location.state.myFunction;

【讨论】：