在 React 中构建可重用的列表组件-js教程-PHP中文网

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

王林

发布： 2024-07-09 22:31:22

转载

731人浏览过

在 react 中构建可重用的列表组件

简介
在 React 开发中，经常会遇到需要显示具有不同样式或内容的类似组件列表的场景。例如，您可能有一个作者列表，每个作者都有不同的信息，例如姓名、年龄、国家/地区和所著书籍。为了有效地处理这种情况，我们可以利用 React 的组件组合和 props 传递。在这篇博文中，我们将探索如何在 React 中构建可重用的列表组件来实现这一目标。

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

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

导出常量作者 = [
  {
    姓名：“莎拉·沃特斯”，
    年龄：55岁，
    国家：“英国”，
    书籍：[《指匠》、《夜巡》]、
  },
  {
    姓名：《村上春树》、
    年龄：71岁，
    国家：“日本”，
    书籍：[《挪威的森林》、《海边的卡夫卡》]、
  },
  {
    名称：“Chimamanda Ngozi Adichie”，
    年龄：43岁，
    国家：“尼日利亚”，
    书籍：[《半个黄日》、《美国》]、
  },
];

登录后复制

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

大型作者列表项目

export const LargeAuthorListItem = ({ 作者 }) => {
  const { 姓名、年龄、国家、书籍 } = 作者；
  返回 （
    <>
      <h2>{名称}</h2>
      <p>年龄：{年龄}</p>
      <p>国家/地区：{国家/地区}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2085">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679986390996.png" alt="表单大师AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2085">表单大师AI</a>
                            <p>一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="表单大师AI">
                                <span>74</span>
                            </div>
                        </div>
                        <a href="/ai/2085" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="表单大师AI">
                        </a>
                    </div>
                
      <p>
        书籍：{" "}
        {books.map((书本，索引) => (
          <span key={index}>{书}</span>
        ))}
      </p>
    </>
  ）；
};

登录后复制

小作者列表项目

export const SmallAuthorListItem = ({ 作者 }) => {
  const { 姓名，年龄 } = 作者；
  返回 （
    <>
      <h2>{名称}</h2>
      <p>年龄：{年龄}</p>
    </>
  ）；
};

登录后复制

创建可重用的列表组件
现在，为了使这些组件可重用且通用，我们创建一个 RegularList 组件。该组件接受一个项目数组、一个指定数据源（在我们的例子中为“作者”）的 prop 以及要渲染的项目组件的类型。

导出 const RegularList = ({ items, sourceName, ItemComponent }) => {
  返回 （
    <>
      {items.map((项目，索引) => (
        <ItemComponent key={index} {...{ [sourceName]: item }} />
      ))}
    </>
  ）；
};

登录后复制

使用可重用列表组件
使用RegularList，我们可以通过传入适当的项目组件和数据源名称轻松呈现不同样式的作者列表。例如：

从 './components' 导入 {authors, RegularList, LargeAuthorListItem, SmallAuthorListItem };

常量应用程序 = () => {
  返回 （
    <div>
      <h1>作者</h1>
      <h2>大卡片</h2>
      <RegularList items={authors} sourceName="author" ItemComponent={LargeAuthorListItem} />
      <h2>小卡片</h2>
      <RegularList items={authors} sourceName="author" ItemComponent={SmallAuthorListItem} />
    </div>
  ）；
};

导出默认应用程序；

登录后复制

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

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

可维护性
通过明确的关注点分离，组件更易于管理和更新。这种模块化方法使代码库更干净、更有组织。

效率
可重用的组件可以通过减少冗余代码执行的需要来提高性能。这使得应用程序更加高效和响应。

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

如果您发现本指南有帮助，请随时与其他人分享并保存以供将来参考。请继续关注有关 React 和 Web 开发的更多有见地的文章！

以上就是在 React 中构建可重用的列表组件的详细内容，更多请关注php中文网其它相关文章！