考虑以下组件层次结构:
var FundComponent = React.createClass({
render : function() {
return (
<div>
<UserComponent profile={data} />
</div>
);
}
});
var UserComponent = React.createClass({
render : function() {
return (
<div>
Some Stuff goes here
</div>
);
}
});
React.renderComponent(<FundComponent />, document.getElementById('fund'));
这将在我的 HTML 中的 #fund
节点内呈现 UserComponent
。
如何在 HTML 的 fund
节点内的特定节点中呈现 UserComponent
?例如:
<div id="fund">
<div id="otherStuff">Stuff</div>
<div id="user">**load UserComponentHere**</div>
</div>
最佳答案
阅读了一些内容后,我找到了如何解决这个问题。请随时纠正我。
React
对于如何解决这个问题有不同的概念。
我们不是在html文件中预先定义html,而是在render
中定义它。函数,如下所示:
var FundComponent = React.createClass({
render : function() {
return (
<div>
<div className="myOtherStuff1">
<OtherComponent1 data={data} /> //other stuff
</div>
<div className="user"> //user
<UserComponent profile={profile} />
</div>
<div className="myOtherStuff2">
//can have component or other static stuff. Upto developer.
</div>
...
</div>
);
}
});
React.renderComponent(<FundComponent />, document.getElementById('fund'));
html 将为:
<div id="fund"></div>
然后,我们可以定义UserComponent
和OtherComponent(s)
我们一起走。
关于javascript - 在 Reactjs 中的自定义 DOM 节点中渲染内部组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23363434/