javascript - ReactJS 操作现有的 DOM 元素

Question

我在求职面试中接到了这个任务。我是 ReactJS 的新手，所以找不到合适的解决方案。

我应该做一些类似 bootstrap 的切换框的东西: image example

这里重要的是应该以这种方式调用组件:

<ToggleBox header="The title goes here">
   The content of the toggle box
</ToggleBox>

我不确定，但我认为它们的意思是调用 HTML 代码附加到 DOM 而不是使用 React.render()。

但是，据我所知，ReactJS 不是为重建现有 DOM 而构建的，是否有任何解决方法来完成此任务？也许我完全弄错了，“调用”他们的意思是使用 React.render()？

谢谢! :-)

Answer 1

该组件需要使用 this.props.children。你可以看看documentation here .

这是一个例子:

var WithChildren = React.createClass({
    render: function() {
        var child = this.props.children;
        var header = this.props.header;
        return (
            <div>
                <div>{header}</div>
                <div>{child}</div>
            </div>
        );
    }
});

React.render(<WithChildren header="Title goes here">Some content</WithChildren>, document.querySelector('.app'));

如果您运行它，您将看到呈现的一些内容。因此，您只需要额外的标记和 CSS 即可使其看起来像图片。