如何获取用户输入并将其打印在一行中？

Question

我想添加一个带有 （名称颜色和价格） 的项目，但是当我尝试时它会像这样添加它们。它应该创建一行，例如 PHONE - Color: 0 - Price: 1000，而不是显示三个内容。我试图制作一种方法，但它也不起作用。我如何编写代码才能将这些输入放在一行中。

</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
  props.options.map((option, index) => (
    <Option
      key={option}
      optionText={option}      
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />     
  ))     
}
{
  props.colors.map((color, index) => (
    <Option        
      colorText = {color}
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />
  ))     
}

{
  props.prices.map((price, index) => (
    <Option       
      priceText = {price}          
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />
  ))  
}

导出默认选项；

Answer 1

嗯，发生的事情是您正在打印整个数组，因此您首先获得了一种类型的所有类型，然后是其他所有类型，而不是获得每个类型的期望结果。

一种方法可以是：

</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
  props.options.map((option, index) => (
<div key={option}>
    <Option
      optionText={option}      
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />
    <Option       
      colorText = {props.colors[index]}
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />
   <Option       
      priceText = {props.prices[index]}          
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />
</div>
  )) 
}
</div>

我是在写作的时候做的，所以也许我忘记了一些括号或括号，但我的想法是只有一个映射，并且在该映射内部每次迭代都会获得一个元素。

如果数组有一个具有 3 个属性的对象，每个类型（选项、颜色、价格）一个，然后将 object.option、object.color 和 object.price 传递给每个 Option 组件，这可能会更好。

在这种方法中，我也没有考虑到 props.prices[index] 或 props.colores[index] 可能不存在，我不知道这是否会发生，这只是为了展示这个概念。