Question

在版本0.13.x版本的react-router中，可以通过执行以下操作将函数作为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}不属于这里，但我现在把它放在哪里？）。

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

任何帮助都将不胜感激。

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将函数传递给子组件

1 个答案: