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

我看到两个选项：

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

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

传递两个孩子两个Wrap并将它们分别放在适当的位置，例如
```
<Wrap>
  <Icons />
  <h1>...</h1>
</Wrap>
```

Answer 2

使用高阶组件执行此操作比通过索引或循环imo访问子级更简洁。

const wrap = (Icons) => class extends React.Component {
    render() {
        return (
          <div>
            <ul className="icons">
                <Icons {...this.props.iconProps} />
            </ul>
            { this.props.children }
          </div>
        );
    }
});

class AppIcons extends React.Component {
    render: function() {
        return <div />
    }
});

class App extends React.Component {
    render: function() {
        return <Wrap iconProps={this.props}><h1>Hello word</h1></Wrap>;
    }
});

const Wrap = wrap(AppIcons);


ReactDOM.render(App, domContainerNode)

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

2 个答案: