javascript - 如何有条件地映射到具有某种 flex 样式的 JSX 输入字段？

Question

我正在尝试创建一个包含多个字段的表单，但我无法理解这个。这看起来很简单，但我采取的大多数方法都很混乱或不起作用。我试图得到以下结果：

<div>
  <input />
</div>
<div>
  <input />
  <input />
</div>

无论我尝试什么，这些 div 总是以自己的方式结束。我在这里做错了什么？

代码沙盒

标签： javascriptreactjs

Answer 1

这是你想要的：

import React from "react";
import "./styles.css";

const renderFields = fields =>
  fields.map(({ name }) => (
    <div style={{ display: name !== "fieldA" ? "inline-block" : "" }}>
      <input />
    </div>
  ));

export default function App() {
  const fields = [{ name: "fieldA" }, { name: "fieldB" }, { name: "fieldC" }];
  return renderFields(fields);
}