React 设计模式：复合组件模式-js教程

首页 2024-07-11 18:53:29

向你致敬，你好，你好，嗨，萨拉姆

react 灵活性允许开发人员创建高度可重用和定制的组件。使用这种灵活性的强大设计模式是复合组件模式。该模式允许开发人员构建由多个相关子组件组成的组件。在本博客中，我们将探索复合组件模式，并通过卡组件的示例来演示其用法。

复合组件模式是什么？

复合组件模式涉及创建管理状态和行为的父亲组件以及使用和显示该状态的子组件。该模式允许您构建高度灵活和可重用的组件。父亲组件提供上下文和状态，子组件使用上下文渲染 ui 部分。

复合组件模式的优点

灵活性：子组件可以按不同的顺序重新排列、省略或重复。
可重用性：组件可以在不同的上下文中以不同的内容重用。
关注点分离：状态管理和ui渲染分离，使组件更容易维护和测试。

示例：卡片组件
让我们用复合组件模式构建一个卡片组件。该卡将包含图像、标题和说明。
有两种方法可以实现这种模式，我将分享这两种方法。

方法一

因此，我们将使用普通函数来创建复合组件箭头函数没有改进，所以你不能在初始化之前使用它们，这就是为什么我使用常规函数。

创建卡片组件
创建 card.jsx 文件。我们将在这个卡片组件中创建复合组件。

import react from "react";


function card({ children }) {
  return <div classname="card">{children}</div>;
}

card.image = image;
card.title = title;
card.description = description;

export default card;

function image({ src, alt }) {
  return <img classname="card-image" src="{src}" alt="{alt}">;
}

function title({ children }) {
  return <h2 classname="card-title">{children}</h2>;
}

function description({ children }) {
  return <p classname="card-description">{children}</p>;
}

创建 styles.css
让我们创建一个风格文件来编写一些基本风格。这不是 css 教程，所以这部分不会投入太多精力。只是一些普通的css。

.app {
  text-align: center;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  gap: 20px;
}
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  <a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/72718.html" target="_blank">overflow</a>: hidden;
  width: 300px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card-image {
  width: 100%;
  height: auto;
}

.card-title {
  font-size: 1.5rem;
  margin: 16px;
  color: blue;
}

.card-description {
  font-size: 1rem;
  margin: 16px;
}

复合组件的使用方法
现在让我们来吧 app.jsx 使用这些组件。样式文件与上述文件相同。

import card from "./card";
import "./styles.css";

const app = () =&gt; {
  return (
    <div classname="app">
      <card><card.image src="/reactjs.jpeg" alt="placeholder image"></card.image><card.title>i'm azfar aslam</card.title><card.description>
          this is a description for the first card. if you like this tutorial,
          please like, subscribe, and share.
        </card.description></card><card><card.image src="/reactjs.jpeg" alt="placeholder image"></card.image><card.title>i'm lead web developer</card.title><card.description>
          this is a description for the second card. if you like this tutorial,
          please like, subscribe, and share.
        </card.description></card>
</div>
  );
};

export default app;

最终结果
这就是最后的样子。您可以看到我们对这种模式和可重用性的控制。

方法2

这样，我们就可以使用箭头函数来创建复合组件。我把它们都放在一个卡片组件文件中，但你也可以创建一个单独的文件。

创建卡片组件
创建 card.jsx 文件。我们将在这个卡片组件中创建复合组件。

import react from "react";

const card = ({ children }) =&gt; {
  return <div classname="card">{children}</div>;
};

export default card;

export const cardimage = ({ src, alt }) =&gt; {
  return <img classname="card-image" src="{src}" alt="{alt}">;
};

export const cardtitle = ({ children }) =&gt; {
  return <h2 classname="card-title">{children}</h2>;
};

export const carddescription = ({ children }) =&gt; {
  return <p classname="card-description">{children}</p>;
};

复合组件的使用方法
现在让我们来吧 app.jsx 使用这些组件。样式文件与上述文件相同。

import Card from "./Card";
import { CardDescription } from "./Card";
import { CardTitle } from "./Card";
import { CardImage } from "./Card";
import "./styles.css";

const App = () =&gt; {
  return (
    <div classname="app">
      <card><cardimage src="/reactjs.jpeg" alt="Placeholder Image"></cardimage><cardtitle>Hello World</cardtitle><carddescription>
          This is a description for the first card. If you like this tutorial,
          please like, subscribe, and share.
        </carddescription></card><card><cardimage src="/reactjs.jpeg" alt="Placeholder Image"></cardimage><cardtitle>This is Second Card</cardtitle><carddescription>
          This is a description for the second card. If you like this tutorial,
          please like, subscribe, and share.
        </carddescription></card>
</div>
  );
};

export default App;

结果是一样的。

结论

react 通过状态管理和 ui 渲染分离构建灵活和可重用的组件。通过使用此模式，您可以创建易于维护和扩展的组件。卡组件示例展示了如何有效地实现这种模式的复杂性 ui 提供强大而可扩展的解决方案。

使用此模式，您可以在应用程序中创建各种可以轻松定制和重用的组件，从而增强开发人员体验和应用程序的整体结构。

我希望这会有所帮助。我很高兴 linkedin 上与您联系

还有几篇文章

在 next js 14 中使用 usereducer 和 context api 管理全局
重点介绍 next js 14 config 2023 的新功能
如何在 wsl2 windows 10 上配置 react js 应用程序
使用 tailwind 和 react js 定制“工具提示”组件
javascript 和 react 2023年面试题(初级/中级)

以上是React 设计模式：复合组件模式的详细内容，请关注其他相关文章！

阅读全文

上一篇：必知：安全更改Linux SSH远程端口
下一篇：计算机右键管理失效：紧急排查与修复

React 设计模式：复合组件模式-js教程

首页 2024-07-11 18:53:29

最新文章

相关文章