使用ReactJS动态加载组件

Dynamically loading component using ReactJS?

本文关键字：组件 加载 动态 ReactJS 使用      更新时间：2024-01-13

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

主体组件类的呈现如下所示：

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

当用户单击侧边栏中的项目时，它将触发主体组件类中的handleComponentChange方法，该方法将"查找"要加载到主体中的组件，然后进行渲染。我有一个标记，我想将组件放置到其中。关于如何将新组件添加到渲染中，有什么想法吗？

要放置新组件的标签应该是组件本身。像"ContentContainer"这样的东西，以你放入的任何东西命名都更合适。

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

现在，当你点击侧边栏中的某个东西（它应该是你的身体组件的子级）时，它会用你的新数据更新身体中的状态。这些新数据将通过props自动传递到您的ContentContainer中，并且您的组件将发生更改。

如果你想在主体内显示一个组件列表，你可以用同样的方式处理，但点击侧边栏会在主体的状态中添加一个新元素，而你的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呈现一个ComponentContainers列表。无论哪种方式，您都只需要在BodyComponent状态下维护一个名称列表。

相关文章：