reactjs - ReactJS 根据用户输入的数量添加组件

Question

您好，所以我有一个称为步骤的输入，如果用户输入说 5 个步骤，那么我想显示一个预构建组件 5 次并将不同的数据发送到这 5 个组件中的每一个。

现在我有这个，但它根本不起作用，或者我只显示组件框的一个渲染而不是 5。我正在使用钩子 fyi。steps 是用户输入的值。

 <div>
     {stepBlock.map(Block => ( <StepsBuilder  key={steps} />))}
 </div>

标签： reactjs

Answer 1

我想 stepBlock 是您想要作为属性发送给 StepsBuilder 组件的项目列表。

 <div>
     {stepBlock.map(block => ( <StepsBuilder  key={steps} block={block} />))}
 </div>

在 StepsBuilder 组件中，您将拥有块作为属性：

function StepsBuilder(props) {
  console.log(props.block)
}