增加多值React JS的新行

Question

我想在map函数中添加一行新的字符串。

我的代码如下所示：

<tbody>
    {" "}
    {dataTable.map((table) => {
        return (
            <tr key={table.id}>
                <th className="border-t-0 px-6 align-middle border-l-0 py-4 pt-4 pb-0 text-left flex items-center">
                    <Avatar name={table.title} size={30} round="25px" className="mr-2" color="#f9fbff" fgColor="#4987f3" />
                    <span className={"ml-3 font-bold light"}>{table.title} </span>{" "}
                </th>{" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.id} </td> {" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.footer} </td>{" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.description} </td> {" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> <i className="fas fa-circle text-emerald-500 mr-2"></i>{" "} {table.tags} </td>{" "}
            </tr>
        );
    })}{" "}
</tbody>

对于标记数据，有一些值，我想为每个标记的值添加一个新行。

​

​

对于数据：

[
  {
    "id": 936556,
    "category": 7,
    "title": "Gorgeous Cotton Fish",
    "description": "The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design",
    "footer": "Gorgeous"
  },
  {
    "id": 874754,
    "category": 8,
    "title": "Unbranded Plastic Fish",
    "description": "The Football Is Good For Training And Recreational Purposes",
    "footer": "Practical",
    "tags": [
      "Music",
      "Kids",
      "Books",
      "Clothing",
      "Baby"
    ],
    "createdAt": "2021-09-10T01:39:35.109073+00:00"
  },
]

Answer 1

我认为您还需要一个专门用于该属性的map()。然后，您可以使用诸如<p>标记或<span>之类的东西来显示数据。

<tbody>
    {" "}
    {dataTable.map((table) => {
        return (
            <tr key={table.id}>
                <th className="border-t-0 px-6 align-middle border-l-0 py-4 pt-4 pb-0 text-left flex items-center">
                    <Avatar name={table.title} size={30} round="25px" className="mr-2" color="#f9fbff" fgColor="#4987f3" />
                    <span className={"ml-3 font-bold light"}>{table.title} </span>{" "}
                </th>{" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.id} </td> {" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.footer} </td>{" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.description} </td> {" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.tags.map((x) => <p><i className="fas fa-circle text-emerald-500 mr-2"></i>{" "} {x}</p>{" "}  );}
     </td>{" "}</tr>
        );
    })}{" "}
</tbody>