在Reactjs中的自定义DOM节点中渲染内部组件

Render Inner Component in a Custom DOM Node in Reactjs

本文关键字：内部 节点 组件 DOM Reactjs 自定义      更新时间：2023-09-26

考虑以下组件层次结构：

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'));

渲染到#userdiv.

相关文章：