javascript - 动态创建 React 元素

Question

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

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

Answer 1

最简单的方法是让您的容器存储一个聊天框列表，您可以根据聊天框是打开还是关闭向其添加或删除聊天框。

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。