动态创建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.