[英]Render Inner Component in a Custom DOM Node in Reactjs
Consider the following Component hierarchy: 考虑以下组件层次结构:
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'));
This will render UserComponent
inside the #fund
node in my HTML. 这将在HTML的#fund
节点内呈现UserComponent
。
How can I render UserComponent
in a specific node inside the fund
node in my HTML ? 如何在HTML的fund
节点内的特定节点中呈现UserComponent
? eg: 例如:
<div id="fund">
<div id="otherStuff">Stuff</div>
<div id="user">**load UserComponentHere**</div>
</div>
After reading around a bit, I found out how to go about this. 经过一番阅读后,我发现了解决方法。 Feel free to correct me. 随时纠正我。
React
has a different concept as to how to go about this. 对于如何实现这一点, React
有不同的概念。
Rather than pre-defining the html in the html file, we define it in the render
function, like so: 我们不是在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'));
And the html will be: <div id="fund"></div>
html将是: <div id="fund"></div>
And then, we can define UserComponent
and OtherComponent(s)
as we go. 然后,我们可以定义UserComponent
和OtherComponent(s)
。
I may be misunderstanding you, but you should simply be able to do: 我可能会误解您,但您应该能够做到:
React.renderComponent(<FundComponent />, document.getElementById('user'));
to render into the #user
div. 呈现到#user
div中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.