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

首页 2024-07-09 22:41:56

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

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

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

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

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

大型作者列表项目

export const LargeAuthorListItem = ({ 作者 }) =&gt; {
  const { 姓名、年龄、国家、书籍 } = 作者；
  返回 （
    
      <h2>{名称}</h2>
      <p>年龄：{年龄}</p>
      <p>国家/地区{国家/地区}</p>
      <p>
        书籍：{" "}
        {books.map((书本，索引) =&gt; (
          <span key="{index}">{书}</span>
        ))}
      </p>
    &gt;
  ）；
};

小作者列表项目

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

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

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

使用可重用的列表组件
使用Regularlist，我们可以通过引入适当的项目组件和数据源名称，轻松呈现不同风格的作者列表。例如:

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

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

导出默认应用程序；

可重复使用组件的好处
通过使用这些组件，我们可以很容易地在应用程序中创建和维护不同风格的对象列表。该方法提高了代码的可重用性和可维护性 React 应用程序更高效、更可扩展。

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

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

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

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

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

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

阅读全文

上一篇：高效查询！戴尔服务器维修网点一键直达
下一篇：腾讯云免费服务器：密码安全，信赖之选！

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

首页 2024-07-09 22:41:56

最新文章

相关文章