灵活组件设计在React中！掌握复合组件模式

2 年 ago
逸, 科
1 minute

学习灵活的组件设计：掌握React中的复合组件模式！

本文提出了一个中文的选项。

目录

    • はじめに

 

    • Compound Componentsパターンとは

 

    • Compound Componentsを使った例

 

    • Compound Componentsを使わない例

 

    • 対比とメリット

 

    まとめ

首先

React 中，组件设计非常重要。我们介绍的复合组件模式是一种能够明确组件间关系、提高重用性的强大技巧。

Compound Components 模式是指。

复合组件模式是一种设计模式，可以在父子组件之间灵活控制。子组件接收来自父组件的属性，并独立地进行功能操作。

使用Compound Components的示例

标签.js

import React, { useState, createContext, useContext } from 'react';

const TabContext = createContext(); // コンテキストを作成

export const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0); // アクティブなタブの状態

  return (
    <TabContext.Provider value={{ activeTab, setActiveTab }}>
      <div>{children}</div> // 子コンポーネントをレンダリング
    </TabContext.Provider>
  );
};

export const Tab = ({ title, children }) => {
  const { activeTab, setActiveTab } = useContext(TabContext); // 親コンポーネントからの状態を取得
  const isActive = activeTab === title; // アクティブなタブか判定

  return (
    <div>
      <button onClick={() => setActiveTab(title)}>{title}</button>
      {isActive && <div>{children}</div>} // アクティブな場合のみコンテンツを表示
    </div>
  );
};

在这个例子中，Tabs组件是父组件，Tab组件是子组件。父组件通过状态来保存当前活动的选项卡，并通过上下文将其传递给子组件。子组件会判断它是否为活动选项卡，并显示对应内容。

不使用Compound Components的例子

Tabs.js选项卡

import React, { useState } from 'react';

export const Tabs = ({ titles, children }) => {
  const [activeTab, setActiveTab] = useState(0); // アクティブなタブの状態

  return (
    <div>
      {titles.map((title, index) => (
        <button onClick={() => setActiveTab(index)} key={index}>
          {title}
        </button>
      ))}
      {children[activeTab]} // アクティブなタブのコンテンツを表示
    </div>
  );
};

在这个设计中，选项卡的标题和内容是分开的，Tabs组件控制着所有的逻辑。子组件仅仅是用来展示内容的，不是独立存在的。

对比和优势

柔軟性: Compound Componentsを使用すると、より柔軟な設計が可能。

再利用性: 各子コンポーネントが独立しているため、再利用しやすい。

可読性: コンポーネントの関係が明確で、コードの可読性が向上。

メンテナンス: メンテナンスが容易。

总结

复合组件模式是一种优秀的方法，可以改进React的组件设计。通过阅读本文，掌握这种强大的模式，并推动开发更精细的React应用程序！

点赞和分享将成为未来文章创作的激励。如果有意见或问题，请随意在评论区提出！

bannerAds