基于多个用户输入的ReactJS插件组件

Question

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

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

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

Answer 1

你可以做这样的事情。给定的stepBlock值为整数。

比方说stepBlock === 5

{[...Array(stepBlock)].map((e, i) => <StepsBuilder  key={steps} />)}

Answer 2

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

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

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

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