在 React 中构建可重用列表组件

介绍

在 React 开发中，经常会遇到需要显示样式或内容各异的相似组件列表的情况。例如，你可能有一个作者列表，每个作者包含不同的信息，例如姓名、年龄、国家/地区以及所著书籍。为了高效地处理这种情况，我们可以利用 React 的组件组合和 props 传递功能。在本篇博文中，我们将探讨如何在 React 中构建可复用的列表组件来实现这一点。

定义数据

假设我们有一个作者数组，每个作者都由一个对象表示，其中包含他们的详细信息，例如姓名、年龄、国家/地区以及他们撰写的书籍。我们希望创建两种不同的样式来显示这些作者：一个显示所有详细信息（包括他们的书籍）的大卡片，以及一个仅显示姓名和年龄的小卡片。

首先，我们定义作者数组：

export const authors = [
  {
    name: "Sarah Waters",
    age: 55,
    country: "United Kingdom",
    books: ["Fingersmith", "The Night Watch"],
  },
  {
    name: "Haruki Murakami",
    age: 71,
    country: "Japan",
    books: ["Norwegian Wood", "Kafka on the Shore"],
  },
  {
    name: "Chimamanda Ngozi Adichie",
    age: 43,
    country: "Nigeria",
    books: ["Half of a Yellow Sun", "Americanah"],
  },
];

创建列表项组件

接下来，我们创建两种不同风格的作者列表项：LargeAuthorListItem和SmallAuthorListItem。前者显示包括书籍在内的所有详细信息，而后者仅显示姓名和年龄。

大型作者列表项

export const LargeAuthorListItem = ({ author }) => {
  const { name, age, country, books } = author;
  return (
    <>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Country: {country}</p>
      <p>
        Books:{" "}
        {books.map((book, index) => (
          <span key={index}>{book}</span>
        ))}
      </p>
    </>
  );
};

小作者列表项

export const SmallAuthorListItem = ({ author }) => {
  const { name, age } = author;
  return (
    <>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </>
  );
};

创建可重复使用的列表组件

现在，为了使这些组件可重用且功能多样，我们创建一个RegularList组件。该组件接收一个项目数组、一个指定数据源（在本例中为“author”）的 prop，以及要渲染的项目组件的类型。

export const RegularList = ({ items, sourceName, ItemComponent }) => {
  return (
    <>
      {items.map((item, index) => (
        <ItemComponent key={index} {...{ [sourceName]: item }} />
      ))}
    </>
  );
};

使用可重复使用的列表组件

通过RegularList，我们可以通过传入相应的项目组件和数据源名称，轻松地以不同的样式渲染作者列表。例如：

import { authors, RegularList, LargeAuthorListItem, SmallAuthorListItem } from './components';

const App = () => {
  return (
    <div>
      <h1>Authors</h1>
      <h2>Large Cards</h2>
      <RegularList items={authors} sourceName="author" ItemComponent={LargeAuthorListItem} />
      <h2>Small Cards</h2>
      <RegularList items={authors} sourceName="author" ItemComponent={SmallAuthorListItem} />
    </div>
  );
};

export default App;

可重用组件的好处

通过利用这些组件，我们可以轻松地在整个应用程序中创建和维护具有不同样式的对象列表。这种方法提高了代码的可重用性和可维护性，从而使我们的 React 应用程序更加高效且可扩展。

代码可重用性

创建可重用组件可以减少代码重复并确保整个应用程序的一致性。对单个组件所做的更改将自动反映在其使用的任何位置。

可维护性

通过清晰的关注点分离，组件更易于管理和更新。这种模块化方法使代码库更加简洁、有序。

效率

可重用组件可以通过减少冗余代码执行的需求来提高性能，从而使应用程序更加高效、响应更快。

结论

在 React 中构建可复用列表组件是一项强大的技术，它可以简化您的开发流程并增强代码库的可维护性。通过利用组件组合和 props 传递，您可以创建适应不同样式和内容需求的多功能组件。在您的下一个 React 项目中尝试这种方法，体验可复用组件的优势！

如果您觉得本指南有用，请随时与他人分享并保存以备将来参考。敬请期待更多关于 React 和 Web 开发的精彩文章！

鏂囩珷鏉ユ簮锛�https://dev.to/vyan/building-reusable-list-components-in-react-8bf