渲染多个不同类型的孩子做出反应

Question

在反应中你可以做类似的事情:

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

var App = React.createClass({
    render: function() {
        return <Wrap><h1>Hello word</h1></Wrap>;
    }
});

这允许您将组件传递给另一个组件.但是,如果Wrap有另一个你可以把内容放入的div.请考虑以下事项:

var Wrap = React.createClass({
    render: function() {
        return (
          <div>
            <ul className="icons">
             // Another compoent should be passed here from App to render icons.
            </ul>
            { this.props.children }
          </div>
        );
    }
});

var App = React.createClass({
    render: function() {
        return <Wrap><h1>Hello word</h1></Wrap>;
    }
});

在上面的示例中,您可以看到我不仅要传递App组件的子项,还要传递另一个组件的图标ul.这可能吗？

如果是这样,怎么样？

Answer 1

我看到两个选择：

1. 将其他组件作为 prop 传递，例如

   <Wrap icons={<Icons />}><h1>...</h1></Wrap>
   

2. 传递两个孩子两个Wrap并将他们每个人渲染到适当的位置，例如

   <Wrap>
     <Icons />
     <h1>...</h1>
   </Wrap>