Javascript 动态创建React元素

我正在和ReactJS（有点像Facebook）聊天，我用ReactJS创建了聊天盒，所以每当你点击一个在线用户时，都必须创建一个聊天盒，我的问题是，是否需要动态创建一个ReactJS组件，或者将聊天盒添加到一个div或另一个React元素

---

下面是我的代码：

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

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);

var ChatBox=React.createClass({
渲染：函数（）{
返回一个新的聊天室！；
}
});
var Container=React.createClass({
getInitialState:函数（）{
返回{chatboxs:[]}；
},
RenderChartBox:函数（）{
var cbs=this.state.chatboxs；
cbs.push（）；
this.setState（{chatboxs:cbs}）；
},
render:function（）{
返回Hello，是否要打开聊天室单击此处
{this.state.chatboxs}
;
}
});
React.render（，document.body）；

对答案进行一点扩展，假设您没有使用Flux模式，那么为了让容器知道聊天室已经关闭，您必须将一个回调从容器传递到每个聊天室

因此，每当你点击一个在线用户，就必须创建一个聊天室

当用户点击在线用户标志符号时，这将触发一个状态变化——您将跟踪打开的聊天窗口。状态更改将触发一个

React.render

循环。在渲染函数中，您必须根据打开的聊天窗口数量（状态变量）决定如何以及在何处调用和放置聊天窗口。这些组件本身应该是React组件，您将把函数和Id作为道具传递/注入到它们中

---

这是没有代码示例的答案。希望有帮助。

是的，你可以。对一个div来说，你只是照常做

React.render(
    <ChatBox />,
    document.getElementById('content')
);

React.render(
,
document.getElementById（'content'）
);

您可以在属性中传递react类定义（即ChatBox变量）或。您可以稍后生成该组件的实例，并将其添加到视图中的某个位置。将其添加到视图中最简单的方法是更改

---

示例（es6语法）

所以当你点击一个名字时，你会呈现一个新的聊天框？@limelights问题是，如果我呈现一个新的聊天框，以前的聊天框将消失。最简单的方法是让你的容器保存一个聊天框列表，然后添加一个新的聊天框@我从没想过！！请写下来作为回答！有点离题了，但是在jsx中你应该使用className而不是class：非常感谢你的回答，你是对的，我没有使用Flux模式，顺便问一下，你有没有用Django实现过Flux？是的。你有什么需要帮助的吗？如果你有一个关于Django的Flux的例子，分享一下会很有趣：我有一个关于flask的例子，但它背后的原理是一样的。不要装饰每个函数，只需将URL放在

urls.py

中，并指向您的函数/cbv即可。非常感谢，我来看看！