是否可以多次使用相同的 prop 标签将数据添加到 React 组件，然后让组件将该数据映射到列表项中？

Question

我想在 React 中创建一个可重复使用的组件，显示特定服务可用的支付方式列表。

是否可以像这样将数据添加到组件中（多次使用相同的 prop 标签）？

const Page = () => {
    <PaymentMethods method="BACS Transfer" method="Cheque" method="PayPal" method="Credit / Debit Card" />
}

或者它可能是一个数组 method=[BACS Transfer, Cheque]

不管怎样，我想知道是否可行。如果是这样，组件映射数据并输出为 <li> 项时是什么样的。

如果这是一个糟糕的方法，那么最好的方法是什么？

提前致谢！

Answer 1

将它们作为数组传递，如下所示：

<PaymentMethods methods={["BACS Transfer", "Cheque", "PayPal", "Credit / Debit Card"]} />

组件本身应该是这样的：

const PaymentMethods = ({methods}) => {
    return <ul>
      {methods.map((method, index) => <li key={index}>{method}</li>)}
    </ul>
}

Answer 2

有很多方法可以实现。

将物品放在一个道具上

<PaymentMethods
  lists={['BACS Transfer', 'Cheque', 'PayPal', 'Credit/Debit Card']}
/>

////
function PaymentMethods({lists}){
  return (
    <ul>
      {lists.map((text)=>(<li>{text}</li>))}
    </ul>
  )
}

使用儿童

<PaymentMethods>
  <li>BACS Transfer</li>
  <li>Cheque</li>
  <li>PayPal</li>
  <li>Credit/Debit Card</li>
</PaymentMethods>

是否可以多次使用相同的 prop 标签将数据添加到 React 组件，然后让组件将该数据映射到列表项中？

Is it possible to add data to a React component using the same prop label more than once, then have the component map that data into list items?

reactjs

react-props

react-component