如何在Reaction中的单个道具中传递多个值?

2022-08-24 00:00:00 reactjs javascript html react-props

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

现在它的工作原理是,我有一个组件,它接受很多如下所示的值:

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

如何执行此操作并同时提取另一端的两个值?


解决方案

可以传递数组或对象:

// e.g
<MyComponent
    valueAB={[100, 90]}
    valueC={{ a: 100, b: 90}} />
在MyComponent中,您将获得ValueAB道具 作为数组,因此您可以执行如下操作:

props.valueAB[0] // 100

或对象:props.valueC.a也是100。

相关文章