ReactJS - 在13.x

Question

我正在尝试渲染一个已经初始化并通过道具传递的子元素。我的孩子依赖于它的上下文，但我不知道如何在渲染之前应用该上下文。例如：

http://jsfiddle.net/5qyqceaj/1/（以下关于React 0.13.3的代码）：

var Parent = React.createClass({
    childContextTypes: {
        test: React.PropTypes.string
    },
    getChildContext: function() {
        return { test: "Working :)" };
    },
    render: function() {
        return (
            <div>
                <b>Initialized Globally:</b><br/> {this.props.child}
                <hr/>
                <b>Initialized Inline:</b><br/> <Child/>
            </div>
        );
    }
});

var Child = React.createClass({
    contextTypes: {
        test: React.PropTypes.string
    },
    render: function() {
        return <div><h1>Context: {this.context.test || "Broken"}</h1></div>;
    }
});

var ChildInstance = <Child/>;

React.render(<Parent child={ChildInstance} />, document.getElementById('container'));

在上面的示例中，全局初始化时<Child/>无法继承Parent传递的上下文。

根据https://github.com/facebook/react/issues/3451#issuecomment-104978224，这是React 0.13.x的一个未解决的问题，其中上下文当前是通过所有者分配的，而0.14则是从父母继承的。

我有三种方法可以解决这个问题：

1. 找到一种在渲染时分配组件中的上下文或手动切换元素所有者的方法。
2. 通过传递道具和标记名重建元素
3. 等待0.14

2对于更复杂的结构实际上是不可维护的，3是投降，有什么办法可以实现1吗？

Answer 1

您可以使用React.cloneElement重新分配React元素的所有者。它将返回一个新元素。请注意you will need to pass a new ref property，否则将保留之前的所有者。

在您的情况下，您将在this.props.child的呈现方法中克隆Parent。