如何根据指定HTML输入元素类型的字符串值有条件地呈现HTML输入元素

Question

我正在使用描述表单中元素的objects的array构建表单。

const fields = [
{ name: "Name", type: "text", placeholder: "What's your fullname?" },
{ name: "Email", type: "email", placeholder: "We promise not to spam you." },
{ name: "Password", type: "password", placeholder: "Make it a good one!" },
{ name: "About", type: "textarea", placeholder: "Tell us a little about yourself ..." },
];

我在每一个物体上绘制地图，以产生我的形状，所有的形状都按要求工作。

{fields.map((field, index) => (
<div key={form-field-${index}`}>
<label htmlFor={field.name}>{field.name}</label>
<div>
{field.type !== "textarea" &&
<input
type={field.type}
id={field.name}
name={field.name}
placeholder={field.placeholder}
/>
}
{field.type === "textarea" &&
<textarea
id={field.name}
name={field.name}
placeholder={field.placeholder}
/>
}
</div>
</div>
))}

正如您所看到的，我有一些基于每个field的type值的条件渲染。对于两个不同的形式元素，这并不可怕，但如果我添加其他形式元素(例如<select>(，如果有更好的选择，我宁愿不使用x条件句。

还有更好的选择吗？把它作为一个函数，或者它自己的组件？

我有点希望有一种方法可以做这样的事情：

{fields.map((field, index) => {
<field.formType
id="{field.name}"
...
/>
});

其中field.formType映射到fields阵列中的formType: "input"。

Answer 1

如果将其分配给一个大写变量，然后使用它(这是一个奇怪的JSX gotcha(，实际上可以做到这一点。看见https://reactjs.org/docs/jsx-in-depth.html#user-定义的组件必须大写。

{fields.map((field, index) => {
const Tag = field.formType
return <Tag 
id={field.name}
...
/>
});

Answer 2

我想为每种类型的输入(输入、文本区域、选择等(创建单独的组件，并继续使用条件：

{fields.map((field, index) => (
<div key={form-field-${index}`}>
<label htmlFor={field.name}>{field.name}</label>
<div>
{field.type === "text" && <Input field={field} />}
{field.type === "email" && <Input field={field} />}
{field.type === "password" && <Input field={field} />}
{field.type === "textarea" && <Textarea field={field} />}
{field.type === "select" && <Select field={field} />}
</div>
</div>
))}

或者，如果您可以更改数组中数据的结构，请添加类似formType的属性，并使用它来定义要使用的组件：

{fields.map((field, index) => (
<div key={form-field-${index}`}>
<label htmlFor={field.name}>{field.name}</label>
<div>
{field.formType === "input" && <Input field={field} />}
{field.formType === "textarea" && <Textarea field={field} />}
{field.formType === "select" && <Select field={field} />}
</div>
</div>
))}

它是干净的，您可以使用单独的逻辑/状态等。如果需要，在每个组件内部

Answer 3

您可以为字段数组提供一个新的字段(属性(，如Component，在那里您可以拥有任何您喜欢的东西，如Component:input、Component:celect、Component:CustomComponent，然后在映射时渲染该组件并提供其他字段作为道具类似：(此处为内部地图(

const {Component, ...props} = field;
return <Component {...props}/>

注意，对于select，您可能需要创建一个自定义组件，当接收到作为道具的选项时，该组件知道如何处理它们，因为select将选项作为子项，而不是属性(道具(