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)

代理Sentry的请求

Sentry (opens new window)是一款非常不错的网页监控工具,可以帮忙收集网页端的报错方便分析用户使用过程中遇到的问题。但是因为有收集用户隐私的风险,有些广告屏蔽软件会屏蔽 Sentry 的请求,所以我们需要使用反向代理的方式,让 Sentry 把请求发到我们自己的后端,我们再转发到 Sentry 服务器上。

# Sentry 端配置

添加 tunnel 选项,Sentry 就会把请求发到这个路径下,然后我们后台再处理转发。

Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  tunnel: '/sentry'
});
1
2
3
4

# 后台转发请求

app.set('trust proxy', true);

app.use(compression());
app.use(express.text());
app.use(express.json());
// 注意这三行代码一定要放在前面才能正常处理请求

app.post(/^\/sentry/, (req, res) => {
  const envelope = req.body;
  const piece = envelope.split('\n')[0];
  const header = JSON.parse(piece);
  if (header.dsn) {
    const dsn = new URL(header.dsn);
    const projectId = dsn.pathname.substr(1);
    const options = {
      hostname: dsn.hostname,
      port: 443,
      path: `/api/${projectId}/envelope/`,
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-sentry-envelope',
        'X-Forwarded-For': req.ip
      }
    };
    const request = https.request(options);
    request.write(envelope);
    request.end();
  }
  res.json({});
});
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

后台 Web 服务器是使用经典的 express,转发的时候记得开启trust proxy,因为我们的服务器基本会放在 Load balancing 后面,为了获取到真实的客户 IP 地址,我们需要层层转发保证收集到的信息是真实 IP 地址,而不是我们后端 IP 地址。

# 总结

Sentry 的反向代理本身并不是很复杂,但是网络上并没有相关的 JS 代码实现和处理 IP 转发问题,所以希望我的代码例子能帮助大家快速的解决这个问题。

# 参考

Dealing with Ad-Blockers (opens new window)

CSS如何处理固定Header哈希标记跳转的问题

有些前端网站一直都有固定的 Header 显示导航,如果我们文档内部有使用 ID 和#符号来帮助跳转到文档某个位置的话,就会被 Header 遮挡住,那我们怎么处理才能让跳转内容正好显示在 Header 下方呢?答案很简单就是让带有 ID 的这个元素占据的空间包含 Header 的高度。

# padding 和 marging 搭配使用

为了保证多占据的空间和 Header 的高度保持一致,我们可以使用 CSS 变量来存储 Header 的高度,这样就能保证一致性。

h1[id] {
  padding-top: var(--header-height);
  margin-top: calc(var(--header-height) * -1);
}
1
2
3
4

margin 可以设定成负数来吃掉撑起来的高度,所以会使元素占据的高度等于显示的高度加上 Header 的高度,这样跳转的时候就能保证内容显示到 Header 下方了。

# 伪元素来撑起空间

h1[id]:before {
  content: '';
  display: block;
  width: 0;
  height: var(--header-height);
  margin-top: calc(var(--header-height) * -1);
}
1
2
3
4
5
6
7

有些时候我们不方便编辑 id 元素本身的 CSS 属性,所以我们可以借助伪元素来实现这个效果。

# 总结

在 CSS 的世界中,margin 的负值有很多妙用,例如显示列表中如果卡片之间有左右间距,但是最外层却需要和容器保持左右一直,我们也可以使用 margin 的负值来解决这个问题。

# 参考

offsetting an html anchor to adjust for fixed header (opens new window)