javascript - 动态创建React元素

我正在用ReactJS(kinda Facebook)进行聊天，并且用ReactJS创建了ChatBox，所以每当您单击在线用户时，都必须创建一个ChatBox，我的问题是，是否仍然可以动态创建ReactJS组件？将ChatBox添加到div或另一个React元素？

这是我的代码:https://gist.github.com/victorcastillo/2c6cb3af4650729eaa1f

最佳答案

最简单的方法是让容器存储一个聊天框列表，您可以在其中添加或删除聊天框，具体取决于它们是打开还是关闭。

var ChatBox = React.createClass({
    render: function () {
        return <div>a new chatbox!</div>;
    }
});

var Container = React.createClass({
    getInitialState: function () {
        return { chatboxes: [] };
    },
    renderChatbox: function () {
        var cbs = this.state.chatboxes;
        cbs.push(<ChatBox />);
        this.setState({chatboxes: cbs});
    },
    render: function() {
        return <div>Hello, do you want to open a chatbox <a onClick={this.renderChatbox}>click here</a>
        {this.state.chatboxes}
        </div>;
    }
});

React.render(<Container name="World" />, document.body);

扩大答案的范围，并假设您没有使用Flux模式，那么为了使容器知道ChatBox已关闭，您必须将回调从容器传递给每个ChatBox。