React组件组合，不香吗？

2023-11-01 05:26:23

React 组件组合，不香吗？

在React中，组件组合是一种强大的模式，它允许我们构建可重用、可维护的应用程序。通过组合较小的、更具体的组件，我们可以创建复杂的用户界面，而无需编写重复的代码。

一个受控的 Tabs 组件可能是这么写的。。。

import React, { useState } from "react";

const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);

  const handleClick = (index) => {
    setActiveTab(index);
  };

  return (
    <div>
      <ul>
        {children.map((child, index) => (
          <li key={index} onClick={() => handleClick(index)}>
            {child.props.title}
          </li>
        ))}
      </ul>

      <div>{children[activeTab]}</div>
    </div>
  );
};

export default Tabs;

Tab+TabItem 的组合使用

在上面的示例中，我们创建了一个受控的 Tabs 组件。这意味着组件的内部状态（活动标签的索引）由组件本身管理。这对于需要在组件之间共享状态的情况很有用。

我们可以通过将 Tab 和 TabItem 组件与 Tabs 组件组合来创建更复杂的 UI。例如，我们可以创建一个带有选项卡和选项卡面板的选项卡面板：

import React from "react";

const Tab = ({ title, children }) => {
  return (
    <li>
      {title}
      {children}
    </li>
  );
};

const TabItem = ({ children }) => {
  return (
    <div>
      {children}
    </div>
  );
};

export { Tab, TabItem };

然后，我们可以使用这些组件创建以下选项卡面板：

import { Tabs, Tab, TabItem } from "./components";

const App = () => {
  return (
    <Tabs>
      <Tab title="Tab 1">
        <TabItem>Content for Tab 1</TabItem>
      </Tab>
      <Tab title="Tab 2">
        <TabItem>Content for Tab 2</TabItem>
      </Tab>
    </Tabs>
  );
};

export default App;