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)
}