如何有條件地將 map 輸入到具有一定彈性樣式的 JSX 輸入字段？

Question

我正在嘗試創建一個包含多個字段的表單，但我無法理解這個。 這看起來很簡單，但我采取的大多數方法都很混亂或不起作用。 我試圖得到以下結果：

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

無論我嘗試什么，這些 div 總是以自己的方式結束。 我在這里做錯了什么？

代碼沙盒

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