使用 ReactJS 动态加载组件？答案

【问题标题】：Dynamically loading component using ReactJS?使用 ReactJS 动态加载组件？
【发布时间】：2015-02-18 23:53:36
【问题描述】：

这是我的场景。我正在构建一个单页应用程序，其中包含一个包含侧边栏组件的正文组件（全部用 JSX 编写）。

body 组件类的渲染是这样的：

return (
  <div>
    <SideBar onComponentChange={this.handleComponentChange}/>
    <div id="content-container">
      <LoadingContainer ref="loading_container"/>
    </div>
  </div>
);

当用户点击侧边栏中的某个项目时，它会触发 body 组件类中的 handleComponentChange 方法，该方法将“查找”要加载到 body 中的组件，然后将其渲染。我有一个标签，我想将组件放入其中。关于如何将新组件添加到渲染中的任何想法？

【问题讨论】：

想通了！这里有一个类似的问题有效：stackoverflow.com/questions/20796548/…

标签： javascript reactjs react-jsx

【解决方案1】：

您要放置新组件的标签应该是组件本身。像“ContentContainer”这样的东西，更适合您放入其中的任何内容。

你的身体组件将不得不包含状态。该状态应该包含您想要在 ContentContainer 中呈现的任何内容的数据。例如，如果您要添加的组件需要显示名称和地址，则您的正文组件需要包含该数据作为状态，并将其作为道具传递到您的 ContentContainer。

现在，当您单击侧边栏中的某些内容（应该是您的 body 组件的子组件）时，它将使用您的新数据更新 body 中的状态。新数据将通过 props 自动通过 react 传递到您的 ContentContainer 中，并且您的组件将发生变化。

如果你想在 body 中显示一个组件列表，你可以用同样的方法来处理，但是点击侧边栏会在 body 的状态中添加一个新元素，你的 ContentContainer 将负责渲染一个列表而不是单个组件。

示例代码：

var SideBar = React.createClass({
    handleClick: function (e) {
        this.props.handleClick("Dave");
    },
    render: function () {
        return <button id='sideButton' onClick = {this.handleClick}> Click me to change Bob to dave< /button>;
    }
});

var ComponentContainer = React.createClass({
    render: function () {
        return <div >{this.props.name}</div>;
    }
});

var BodyComponent = React.createClass({
    handleClick: function(newData) {
        this.setState({data: newData}); 
    },
    getInitialState: function() {
        return {data: this.props.data};
    },
    render: function() {
        return <div><ComponentContainer name={this.state.data}/><SideBar handleClick={this.handleClick}/></div>;
    }
});



var originalName = {originalName: "bob"};

React.render(<BodyComponent data={originalName}/>, document.getElementById('content'));

如果您想在“Bob”旁边添加“Dave”而不是替换他，您可以让 ComponentContainer 呈现一个列表而不是单个 div，或者让 BodyComponent 呈现一个 ComponentContainer 列表。无论哪种方式，您只需在 BodyComponent 状态中维护一个名称列表。

【讨论】：