[英]Render Inner Component in a Custom DOM Node in Reactjs
考虑以下组件层次结构:
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)
。
我可能会误解您,但您应该能够做到:
React.renderComponent(<FundComponent />, document.getElementById('user'));
呈现到#user
div中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.