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

【问题标题】：How can I pass multiple values in a single prop in react?如何在反应中在单个道具中传递多个值？
【发布时间】：2021-02-27 21:02:28
【问题描述】：

有什么方法可以在一个 prop 中传递多个值？

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

<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}}，但我不知道。

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

【问题讨论】：

【解决方案1】：

你可以传递一个数组或一个对象：

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

在 MyComponent 中你会得到 valueAB 道具作为数组，因此您可以执行以下操作：

props.valueAB[0] // 100

或者对于对象：props.valueC.a 也是 100。

【讨论】：

【解决方案2】：

我认为您可以像 {{100, 90}} 或一个数组 {[100,90]} 一样将它们添加为一个对象

您可以像这样轻松地从数组中提取它们：

let myCompValueABFirst = props.valueAB[0];
let myCompValueABSecond = props.valueAB[1];

【讨论】：