Question

我已经看到可以将子组件作为子项或属性传递给React组件。

即。以下SSCCE举例说明了这两种方法：

$(document).ready(doStuff);

function doStuff() {

    ReactDOM.render(
            <App1>
                <li>line 1 </li>
                <li>line 2 </li>
            </App1>, $('#app1')[0]);

    ReactDOM.render(
            <App2 child1={<li>line 1</li>}
                  child2={<li>line 2</li>}
            /> , $('#app2')[0]);    

}

const App1 = React.createClass({
    render: function() {
        return (
            <ul>
                {this.props.children}
            </ul>
        );
    }
});

const App2 = React.createClass({
    propTypes: {
        child1: React.PropTypes.object.isRequired,
        child2: React.PropTypes.object.isRequired
    },
    render: function() {
        return (
            <ul>
                {this.props.child1}
                {this.props.child2}
            </ul>
        );
    }
});

我的问题是：

这两种方法之间是否有任何差异（例如，对于cloneElement或许）？我看到的一个区别是，使用props方法，我可以在propTypes中添加有关下级组件的类型信息。
如果下属子元素作为属性传递，那么在propsTypes属性中指示它们是React组件而不仅仅是任何通用Javascript对象的惯用方法是什么？执行console.log(this.props.child1.constructor.name)只需打印Object。

Answer 1

this.props.children的优点是容器组件的语法糖。

但它有很多限制。问题是，当它包含少于2个元素时，它不是常规数组，甚至根本不是数组，因此您需要使用React.Children.map之类的专用工具而不是像Array这样的标准工具map。

如果道具适合你，请继续使用它。

将子组件作为子项与属性进行传递

1 个答案: