如何使用 react-router 将函数传递给子组件

Question

在 react-router 的 0.13.x 版本中，函数可以作为 prop 传递给 RouteHandler 的子组件，方法如下：

<RouteHandler foo={this.foo} {...this.state} />

我最近升级到 1.0.0 版本，发现新语法不允许我附加函数：

{React.cloneElement(this.props.children, {...this.state}, foo={this.foo})}

上面的代码抛出一个编译错误，因为 foo={this.foo} 是一个意外的标记（我知道 foo={this.foo} 不属于这里，但我现在应该把它放在哪里？） .

如何将函数附加到组件以便我可以从子组件调用它们？我在这里的用例是我希望我的子组件能够调用一个发出事件，该事件将告诉服务器将通知推送到连接的套接字，这将与连接的客户端同步。

如有任何帮助，我们将不胜感激。

Answer 1

React.cloneElement(docs)的签名如下：

React.cloneElement(element: ReactElement|ReactElement[], props: object)

因此，您的调用将无法正常工作 - 不要介意它是无效语法这一事实。您正在寻找的是这样的东西：

React.cloneElement(this.props.children, merge(this.state, this.foo))

其中 merge 是一个可以将 N 个对象组合在一起的函数（希望你意识到你可能会以破坏告终）。为了加分，您可能希望使用不可变合并。如果您正在使用 immutable（您是，对吗？），您可以这样做：

import {Map} from 'immutable'

const newProps = Map(this.state).merge(Map({ foo: this.foo }))
return React.cloneElement(this.props.children, newProps)

不过，这对您来说可能有点矫枉过正。

如何使用 react-router 将函数传递给子组件

How do I pass a function to a child component using react-router

reactjs

react-router