Question

我是Bootstrap Panel的组件包装器：

var Panel = React.createClass({
    render: function () {
        return (
            <div className="panel panel-default">
                <div className="panel-heading">
                    <div className="panel-title">
                        {this.props.title}
                    </div>
                </div>
                <div className="panel-body"></div>
            </div>
        );
    }
});

如何在示例中输出“panel-body”标签“h1”和组件“AvailableActions”，您可以在下面看到这些内容？

var PlayerActions = React.createClass({
    render: function () {
        return (
            <Panel title="Actions">
                <h1>Some description here...</h1>
                <AvailableActions></AvailableActions>
            </Panel>
        );
    }
});

Answer 1

好像你需要this.props.children

var Panel = React.createClass({
    render: function () {
        return (
            <div className="panel panel-default">
                <div className="panel-heading">
                    <div className="panel-title">
                        {this.props.title}
                    </div>
                </div>
                <div className="panel-body">{ this.props.children }</div>
            </div>
        );
    }
});

Example

Answer 2

<div className="panel-body">
    {this.props.children}
</div>

ReactJs。获取儿童组件

2 个答案: