ReactJS操纵现有的DOM元素

Question

I got this task during a job interview. I'm new to ReactJS so I couldn't find a proper solution.

I'm supposed to make something like bootstrap's toggle box: image example

The important thing here is that the component should be invoked this way:

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

I'm not sure but I think they mean that the invoking HTML code is attached to the DOM and not using React.render().

However, as far as I know, ReactJS isn't structured for rebuilding existing DOM, is there any workaround to accomplish this task? Maybe I got it all wrong and by "invoking" they mean to use React.render()?

Thanks! :-)

Answer 1

The component would need to use this.props.children . You can look at the documentation here .

Here's an example:

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'));

If you run that you will see Some content rendered. So all you would need is the extra markup and CSS to make it look like the image.