Question

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

body组件类的渲染如下所示：

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

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

Answer 1

要放置新组件的标记应该是组件本身。类似'ContentContainer'的东西，更适合你投入的任何内容。

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

现在，当您单击侧边栏中的某些内容（应该是您的身体组件的子项）时，它将使用您的新数据更新正文中的状态。新数据将通过道具自动传递到您的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渲染一个ComponentContainer列表。无论哪种方式，您只需维护BodyComponent状态中的名称列表。

使用ReactJS动态加载组件？

1 个答案: