Question

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

我使用以下共享代码以两种不同的方式尝试了它：

/** @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()
);

这个问题是超级组件内部html被注入的组件替换。还会出现其他错误。似乎这不是反应方式。

2。通过setProp使用单个renderComponent

注入子组件

另一种方法是设置子道具。

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

这几乎按预期工作，但也有一些缺点。它将子项重置为仅注入的组件。我可以解决这个问题：

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

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

另一个缺点是当视图深度超过2时，对React组件的引用消失了，因为只有rootView是通过React.renderComponent呈现的，因此我只能在rootview上执行setProps。

我认为每个视图都需要React.renderComponent，但我不知道如何将其注入父母中。

Answer 1

在大多数情况下，将组件传递给另一个组件的首选方法是使用特殊的 children prop（就像您在示例中所示）：

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

您可以阅读更多here

将组件注入另一个组件

1 个答案: