react

React 实现 Tabs 组件

基于 Vue 框架来实现各种 UI 组件之前有讲过,并且讲述了复合组件如何传递数据。一种方式是使用 Provide / inject, 另外一种是传统的 props$emit()。 但是 React 下复合组件如何实现,和 Vue 相比差距还是挺大的。接下来就讲述经典的 Tabs 组件如何来实现。

# Tabs 组件介绍

Tabs 是复合组件。Tabs 组件封装逻辑和显示上部的导航栏。 TabPane 用来传递属性和展示要显示的内容。具体使用请看下面的代码:

<Tabs>
  <TabPane label="文档" name="doc">
    文档
  </TabPane>
  <TabPane label="快速起步" name="start">
    快速起步
  </TabPane>
  <TabPane label="帮助" name="help">
    帮助
  </TabPane>
</Tabs>
1
2
3
4
5
6
7
8
9
10
11

这里 TabPane 的两个属性,一个是用来展示 Tabs 的文本,一个用来标注组件的 key,所以 name 属性必须是独一无二的。

# Tabs 组件的实现

React 框架可以通过 children 属性访问子组件,我们就利用这个特性来获取 TabPane 组件的相关属性。

export interface TabsProps {
  children: React.ReactNode;
  className?: string;
}

const Tabs: React.FC<TabsProps> = ({ children, className = '' }) => {
  const [activeTab, setActiveTab] = useState('');

  useEffect(() => {
    const firstChild = React.Children.toArray(children)[0];
    if (firstChild && React.isValidElement(firstChild)) {
      setActiveTab(firstChild.props.name);
    }
  }, [children]);

  return (
    <div className={cls(styles.tabs, className)}>
      <div className={styles.tabsNav}>
        {React.Children.map(children, child => {
          if (React.isValidElement(child)) {
            const { name, label, disabled } = child.props;
            return (
              <button
                key={name}
                className={cls(styles.tabsNavButton, {
                  [styles.active]: name === activeTab
                })}
                disabled={disabled}
                onClick={() => setActiveTab(name)}
              >
                {label}
              </button>
            );
          } else {
            return null;
          }
        })}
      </div>
      <div className={styles.tabsContent}>
        {React.Children.map(children, child => {
          if (React.isValidElement(child)) {
            const { name, children } = child.props;
            if (name === activeTab) {
              return children;
            } else {
              return null;
            }
          } else {
            return null;
          }
        })}
      </div>
    </div>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

Tabs 组件负责维护 activeTab 状态,并且根据用户操作显示正确的 TabPane。相比之下 TabPane 组件的实现就非常简单:

export interface TabPaneProps {
  label: string;
  name: string;
  children: React.ReactNode;
  disabled?: boolean;
  className?: string;
}

const TabPane: React.FC<TabPaneProps> = ({ children, className = '' }) => {
  return <div className={cls(styles.tab, className)}>{children}</div>;
};
1
2
3
4
5
6
7
8
9
10
11

只是单纯的封装了一下要展示的内容而已。

# 总结

React 框架在实现复合组件的时候和 Vue 的方式有很大差异,不过 React 的逻辑看起来更加简单和易用。自己动手实现 UI 组件对于每个前端工程师来说都是成长道路上必不可少的一项技能,软件开发中没有银弹,我们不能总是依赖第三方 UI 库来实现界面。花费在适配第三方软件库的时间绝对不亚于自己手写一个组件的时间。

# 参考

Tabs 标签栏 - Semi Design (opens new window)

React的TypeScript写法

最近在用 React 写前端,不得不说 React 对 TypeScript 的支持比 Vue 好,Vue 的话,在组件传 Prop 的时候会丢失静态检查。

# React 组件写法

目前 React 有两种写法,一种是 Class Components,另外一种是 Function Components。这两种写法都可以,不过如何选择呢? 个人倾向于复杂的组件需要管理生命周期或者事件响应的话使用 Class Components,简单的组件例如只是展示一个按钮或者链接。使用 Function Components。 因为 Function Components 写起来代码更短。

# Class Components

import React, { ReactNode } from 'react';

interface ButtonProps {
  disabled?: boolean;
  children: ReactNode;
}

interface ButtonStates {
  count: number;
}

class Button extends React.Component<ButtonProps, ButtonStates> {
  static defaultProps = {
    disabled: false
  };

  constructor(props: ButtonProps) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    const { disabled, children } = this.props;

    return <button disabled={disabled}>{children}</button>;
  }
}

export default Button;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

上面的例子演示了如何定义属性和状态,并且设置默认属性值和初始化状态。

# Function Components

import React, { ReactNode } from 'react';

interface ButtonProps {
  disabled?: boolean;
  children: ReactNode;
}

const Button: React.FC<ButtonProps> = ({ disabled = false, children }) => {
  return <button disabled={disabled}>{children}</button>;
};

export default Button;
1
2
3
4
5
6
7
8
9
10
11
12

Function Components 不能直接传入 state 参数,需要使用 useState 函数来处理。

# 总结

React 写起来非常方便,但是条件渲染还是没有 Vue 方便。由于没有官方的 TypsScript 例子。只能自己总结一下方便以后使用了。