动态创建React元素

我正在与ReactJS（有点Facebook）聊天，并且我创建了与ReactJS聊天室，所以无论何时您点击在线用户ChatBox必须创建，我的问题是，是否有动态创建ReactJS组件可能会将ChatBox添加到div或另一个React元素中？动态创建React元素

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

来源

2015-09-06 Victor Castillo Torres

所以，当你点击一个名字你呈现一个新的聊天框？ –

@limelights是 –

@limelights问题是，如果我渲染一个新的聊天框，以前的聊天框将消失 –

简单的方法是让你的容器仓库给你追加其chatboxes的列表或删除取决于chatboxes如果他们是打开或关闭。

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

的答案扩展了一下，假设你不使用通量分布图则，以便容器知道一个客舱已经被关闭，你将不得不从容器到各传递一个回调客舱。

来源

2015-09-06 08:53:59

谢谢如此多的答案，你是对的，我没有使用Flux模式，顺便说一句，你有没有用Django实现Flux？ –

是的。有什么需要帮助的吗？ –

如果你有一个关于带Django的Flux的例子，将会非常有趣，可以分享一下：D –

所以每当你点击一个在线用户客舱必须创建

当在线用户字形用户点击这应该触发状态变化 - 你会被保留跟踪打开的聊天窗口。状态改变将触发一个周期。在你的渲染函数中，你必须决定如何以及在哪里调用和放置你的聊天窗口，基于有多少个开放的（状态变量）。这些应该是React组件，你可以通过/注入函数和Id作为道具。

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

来源

2015-09-06 08:55:46

是的，你可以。一个DIV，你只是做平常

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

您可以通过一个反应类定义（即客舱变量），或在财产react factory。稍后可以生成该组件的实例并将其添加到视图中的某个位置。将其添加到视图最简单的方法是更改children of a Container type of component。

上codepen（ES6语法）示例

来源

2015-09-06 09:18:38 widged

动态创建React元素

回答

相关问题