reactjs - 将组件注入(inject)另一个组件

Question

将一个组件注入(inject)另一个组件的首选方法是什么？我有一个面向对象的应用程序结构，其中 View 只知道其父 View 。因为我的所有组件都是“动态”组件，所以我事先不知道组件结构。

我使用以下共享代码以两种不同的方式进行了尝试:

/** @jsx React.DOM */
var component = React.createClass({
    render: function () {
        return (
            <div>
                .. many elements here ..
                {this.props.children}
            </div>
        );
    }
});
var subcomponent = React.createClass({
    render: function () {
        return (
            <div>test</div>
        );
    }
});

var parentView = React.renderComponent(
    <component>.. subelements</component>,
    document.getElementById('reactContainer')
);

<强>1。渲染多个组件

var subView = React.renderComponent(
    <subcomponent />,
    parentView.getDOMNode()
);

这样做的问题是 super 组件内部的 html 被注入(inject)的组件替换了。另外还会出现其他错误。看起来这不是 React 的做法。

<强>2。通过 setProp 使用单个 renderComponent 注入(inject)子组件

另一种方法是设置 Children 属性。

parentView.setProps({
    children: <subcomponent />
});

这几乎按预期工作，但也有一些缺点。它将子项重置为仅注入(inject)的组件。我可以通过以下方式解决这个问题:

parentView.setProps({
    children: [parentView.props.children, <subcomponent />]
});

但是现在childView正在管理其父级的子级。但我可以将其提取到parentView 上的方法中。

另一个缺点是，当 View 深度超过 2 时，对 React 组件的引用就会消失，因为只有 rootView 是通过 React.renderComponent 渲染的，因此我只能在 Root View 。

我认为每个 View 都需要一个 React.renderComponent ，但我不知道如何将它注入(inject)到父级中。

Answer 1

在大多数情况下，将一个组件传递给另一个组件的首选方法是使用特殊的 children 属性(如示例中所示):

var component = React.createClass({
    render: function () {
        return (
            <div>
                .. many elements here ..
                {this.props.children}
            </div>
        );
    }
});

您可以阅读更多 here