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。

Answer 2

因此，无论何时单击在线用户，都必须创建一个ChatBox

当用户点击在线用户字形时，这应该会触发状态更改 - 您将跟踪打开的聊天窗口。状态更改将触发React.render周期。在渲染功能中，您必须根据有多少个打开的窗口（状态变量）来决定调用和放置聊天窗口的方式和位置。这些应该是React组件本身，你将把函数和Id作为道具传递给它们。

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

Answer 3

是的，你可以。对于div，你只需要做通常的

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

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

codepen上的示例（es6语法）

动态创建React元素

3 个答案: