Question

我注意到React只是浅浅地冻结了道具，并且React.cloneElement只是浅浅地合并了道具。那么，当我们可以的时候，我们应该只是浅浅地传递道具吗？

Answer 1

你绝对可以在道具中传递对象，我认为这根本不是一个坏习惯，尽管在你的组件上定义PropTypes是个好主意，这样它的用户就知道要传递什么。 / p>

我还建议调查making your model immutable。不可变对象总是“冻结”，加上它们还有其他好处，例如允许你以非常有效的方式实现shouldComponentUpdate，进行深度比较/深度克隆等等。这种事情在反应中起得非常好。 / p>

Answer 2

我想说尽可能让它们变浅，但总是这样做是不可行的，因为你必须假设你的数据是超平的。最重要的是，react允许你传递具有形状的物体，所以我想它可以传递和反对。

例如，查看下面的Animal对象。

{
   name: 'Cow',
   sound: 'Moo',
   size: {
     height: 50,
     width: 200
   },
   origin : {
     location: { 
        lat: 42.42,
        lng: 83.02
     },
     name: 'Cow Land'
   }
}

您可以决定制作一张收集物品的动物卡片。它可能具有特定的形状，其中包含大部分道具。

在卡片中，您可能想要使用大多数属性。但是，location是嵌套对象，也可能使用您拥有的位置组件进行描述。

在某些时候，您的数据必须从某个地方进入。如果这个动物对象是较大的动物对象的一部分，那么通过点入嵌套路径传递单个道具将会过于繁琐，并且会使一个组件过于膨胀。

我建议明确你的对象沿着组件链走下去的样子。组件应该是可组合的，所以我也想象尽可能地分解。组件可以由处理嵌套数据结构的较小组件构成。从那里，保持单向数据流将有助于使您的数据不可变。

最终，请自行决定何时传递原始值，也可以是形状对象。

反应示例显示了两者。

var ProductRow = React.createClass({
    render: function() {
        var name = this.props.product.stocked ?
            this.props.product.name :
            <span style={{color: 'red'}}>
                {this.props.product.name}
            </span>;
        return (
            <tr>
                <td>{name}</td>
                <td>{this.props.product.price}</td>
            </tr>
        );
    }
});

在这个例子中，它们点缀在道具上的产品上。所以这个组件正在接受一个产品对象，并假设其上有什么。

祝你好运！

在React组件中只提供浅层道具是最佳做法吗？

2 个答案: