動態創建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元素

回答

相關問題