Question

我在求职面试中完成了这项任务。我是ReactJS的新手，所以我无法找到合适的解决方案。

我应该制作像bootstrap的切换框这样的东西： image example

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

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

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

但是，据我所知，ReactJS不是用于重建现有DOM的结构，是否有任何解决方法来完成此任务？也许我把它全部搞错了并且通过＆＃34;调用＆＃34;他们的意思是使用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'));

如果你跑了，你会看到Some content被渲染。所以你需要的是额外的标记和CSS，使它看起来像图像。

ReactJS操纵现有的DOM元素

1 个答案: