javascript - ReactJS - 在 13.x 中分配上下文/所有者

Question

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

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 时，他们将从父级继承它。

我可以想象出 3 种方法来解决这个问题:

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

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

Answer 1

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

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