在 React 中只渲染一次表格子标题答案

【问题标题】：Render table subheader only once in React在 React 中只渲染一次表格子标题
【发布时间】：2022-10-13 18:18:58
【问题描述】：

我在 React 中创建了下表。

我渲染的项目具有libraries 或softwareComponents 类别作为类别。

{
  items.map((component: Components) =>
    component.category === "libraries" ? (
      <React.Fragment>
        <tr>
          <th>Libraries</th>
          <th>&nbsp;</th>
        </tr>
        <tr key={component.name}>
          <td>{component.name}</td>
          <td>{component.version}</td>
        </tr>
      </React.Fragment>
    ) : (
      <React.Fragment>
        <tr>
          <th>Software Components</th>
          <th>&nbsp;</th>
        </tr>
        <tr key={component.name}>
          <td>{component.name}</td>
          <td>{component.version}</td>
        </tr>
      </React.Fragment>
    )
  );
}

问题是现在每次都会渲染子标题，但我只想显示一次。

【问题讨论】：

你能添加你的物品清单吗？

标签： reactjs

【解决方案1】：

你可以分开项目列表并这样写：

const libraryList = items.filter((item) => item.category === "libraries");
const others = items.filter((item) => item.category !== "libraries");

export default function App() {
  return (
    <div className="App">
      {libraryList.length && (
        <>
          <tr>
            <th>Libraries</th>
            <th>&nbsp;</th>
          </tr>
          {libraryList.map((component) => (
            <tr key={component.name}>
              <td>{component.name}</td>
              <td>{component.version}</td>
            </tr>
          ))}
        </>
      )}
      {others.length && (
        <>
          <tr>
            <th>Software Components</th>
            <th>&nbsp;</th>
          </tr>
          {others.map((component) => (
            <tr key={component.name}>
              <td>{component.name}</td>
              <td>{component.version}</td>
            </tr>
          ))}
        </>
      )}
    </div>
  );
}

【讨论】：

【解决方案2】：

您可以声明两个数组，一个用于libraries，一个用于“软件”。然后，将 items 映射到 return 语句之外，并将每个表行推送到匹配的数组。

之后，您只需在 return 语句中返回数组。见codeSandbox

const libraries = [];
const software = [];

items.map((component) => {
    const tableRow = (
      <tr key={component.name}>
        <td>{component.name}</td>
        <td>{component.version}</td>
      </tr>
    );
    component.category === "libraries"
      ? libraries.push(tableRow)
      : software.push(tableRow);
  });

还有你的 JSX：

 return (
        <>
          <React.Fragment>
            <tr>
              <th>Libraries</th>
              <th>&nbsp;</th>
            </tr>
            {libraries}
          </React.Fragment>
    
          <React.Fragment>
            <tr>
              <th>Software Components</th>
              <th>&nbsp;</th>
            </tr>
            {software}
          </React.Fragment>
        </>
      );

【讨论】：