如何在 React Router Link 中使用 props 传递函数？

Question

我必须使用 Link

将函数传递给另一个组件

    testFavorite=()=>{
        console.log("work")
    }

    <Link 
       to={{
       pathname: '/popular',
         state:{
            testFavorite: this.testFavorite
         }
       }}>
   Popular</Link>

这就是我调用函数的方式 this.props.location.state.testFavorite();

这给了我这个错误

DataCloneError: Failed to execute 'pushState' on 'History': () => testFavorite() could not be cloned.

Answer 1

在 <Link /> 组件中，我将“状态”属性替换为“数据”属性。现在可以使用了！

<Link 
    to={{
       pathname: '/popular',
       data:{
          testFavorite: this.testFavorite
       }
    }}
>
   Popular
</Link>

可以通过以下方式访问：this.props.history.location.data

如何在 React Router Link 中使用 props 传递函数？

How can I pass function using props in React Router Link?

reactjs

react-router

react-router-v4

react-props