动态创建React元素

Question

我正在使用ReactJS进行聊天（类似Facebook），并使用ReactJS创建了聊天框。因此，每当您单击在线用户时，都必须创建一个聊天框。我的问题是，是否有一种方式可以动态创建ReactJS组件，将聊天框添加到div或另一个React元素中？

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

- Victor Castillo Torres

---

当你点击一个名字时，你会渲染一个新的聊天框？ - Henrik Andersson

@limelights 问题在于，如果我渲染一个新的聊天框，之前的聊天框将会消失。 - Victor Castillo Torres

最简单的方法是让您的容器保持聊天框列表并添加一个新的聊天框。http://jsfiddle.net/kb3gN/12132/ - Henrik Andersson

@limelights 我从来没有想过这个问题！请把它写成答案吧！ - Victor Castillo Torres

有点离题，但在JSX中应该使用className而不是class: https://github.com/facebook/react/issues/346 - DBrowne

@DBrowne 我知道，但还是谢谢你提醒我。 - Victor Castillo Torres

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中。

- Henrik Andersson

---

非常感谢您的回答，您是正确的，我没有使用Flux模式，顺便问一下，您是否曾经在Django中实现过Flux？ - Victor Castillo Torres

是的。您需要帮忙吗？ - Henrik Andersson

如果你有关于在Django中使用Flux的示例，那么分享出来会非常有趣 :D - Victor Castillo Torres

我用Flask做过类似的东西，但背后的原理是相同的。https://github.com/limelights/todo-reflux 。你不需要给每个函数都加修饰符，只需将URL放入“urls.py”文件中，然后将其指向你的函数/CBV即可。 - Henrik Andersson

非常感谢，我会看一下的！ - Victor Castillo Torres

Answer 2

当用户点击在线用户时，需要创建一个聊天框。当用户点击在线用户图标时，应触发状态更改--您将跟踪打开的聊天窗口。状态更改会触发React.render循环。在您的渲染函数中，您将必须根据有多少个打开的窗口（状态变量）来决定如何以及在哪里调用和放置聊天窗口。它们应该是React组件本身，并且您将传递/注入函数和ID作为属性到它们中。以上是没有代码示例的答案。希望能有所帮助。

- Wylie Kulik

Answer 3

可以的。对于一个 div，你只需要像平常一样使用

即可。

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

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

在codepen上有一个示例（使用es6语法）。

- widged