Reactjs 将组件注入到另一个组件中

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

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

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

/**@jsx React.DOM*/
var component=React.createClass({
渲染：函数（）{
返回(
…这里有很多元素。。
{this.props.children}
);
}
});
var subcomponent=React.createClass({
渲染：函数（）{
返回(
测试
);
}
});
var parentView=React.renderComponent(
…子元素，
document.getElementById（'reactContainer'）
);

1。呈现多个组件

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

var子视图=React.renderComponent(
,
parentView.getDOMNode（）
);

问题是html内部的超级组件被注入的组件替换。此外，还出现了其他错误。似乎这不是做这件事的方式

2。通过带有单个渲染组件的setProp注入子组件

另一种方法是设置儿童道具

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

parentView.setProps({
儿童：
});

这几乎和预期的一样有效，但也有一些缺点。它将子项重置为仅注入的组件。我可以通过以下方式解决这个问题：

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

parentView.setProps({
儿童：[parentView.props.children，]
});

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

另一个缺点是，当视图深度大于2时，对React组件的引用将消失，因为只有rootView通过

React.renderComponent

渲染，因此我只能在rootView上执行setProps

---

我想每个视图都需要一个

React.renderComponent

，但我不知道如何将其注入父视图中。

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

var component=React.createClass({
渲染：函数（）{
返回(
…这里有很多元素。。
{this.props.children}
);
}
});

---

你可以阅读更多

我不能完全理解你的模式，但你似乎在与惯用的反应做事方式作斗争。您或许应该重新阅读文档并重新开始：（您不需要注入子组件，它们绝对不应该作为道具传递。这里介绍了如何处理子组件：我也对您在这里尝试的操作感到非常困惑。为了在父级中包含子组件，您只需在父级的

render

函数中调用子级。为什么要插入c通过道具的hild完全超出了我的理解范围，绝对不是你应该尝试去做的事情。

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