如何在反应中的单个道具中传递多个值？

Question

有什么方法可以在单个道具中传递多个值吗？

现在它的工作原理是我有一个组件，它接受很多像这样的值：

<div>
  <MyComponent
    valueA={100}
    valueB={90}
    valueC={80}
    valueD={70}
    valueE={60}
  />
</div>

例如，A 和 B 是相关的，我想将它们一起传递，就像

<div>
  <MyComponent
    valueAB={100, 90}
    valueC={80}
    valueD={70}
    valueE={60}
  />
</div>

它可能需要在像这样的单个对象中：valueAB={{100, 90}}但我不知道。

我怎样才能做到这一点并提取另一侧的两个值？

Answer 1

您可以传递数组或对象：

// e.g
<MyComponent
    valueAB={[100, 90]}
    valueC={{ a: 100, b: 90}} />

在 MyComponent 中，您将获得 valueAB 属性作为数组，因此您可以执行以下操作：

props.valueAB[0] // 100

或者对于 object:props.valueC.a也是 100 。