使用 TypeScript 的 React 组件点表示法

这篇文章将深入探讨使用组件点表示法时的这些优势，重点介绍一些问题，并提供一些示例。

什么是组件点符号？

顾名思义，它使用“点”来访问对象的属性，通常称为点表示法。但是，由于这是在组件级别（仍然只是对象），为了清楚起见，我更喜欢“组件点表示法”。一个简单的例子是 React Context (https://reactjs.org/docs/context.html)。

代码语言：javascript复制

const ThemeContext = React.createContext("light");

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <ThemedButton />
      </ThemeContext.Provider>
    );
  }
}

function ThemedButton(props) {
  return (
    <ThemeContext.Consumer>
      {theme => <Button {...props} theme={theme} />}
    </ThemeContext.Consumer>
  );
}

在此示例中，创建了 ThemeContext 并且是顶级组件。 Provider 和 Consumer 都是 ThemeContext 的子组件，使用点符号访问。

定义

这些术语将在帖子的其余部分中使用。

•顶级组件：实际导入的组件（例如：ThemeContext 或 Flex）。每组组件只有一个。•子组件：使用点符号访问的任何组件（例如：ThemeContext.Provider 或 Flex.Item）。每组有一个或多个组件。•组件点符号：使用点符号从顶级组件访问子组件。

为什么使用组件点表示法？

在使用组件点符号来维护和使用一组组件时，我体验到了一些关键的好处。

✏️ 命名空间

由于使用组件点表示法，所有子组件本质上都由顶级组件命名。我们以一个包装了 CSS flexbox 的 Flex 组件为例。顶层组件名为 Flex，带有一个子组件：Flex.Item。

代码语言：javascript复制

import { Flex } from "flex";

function User() {
  return (
    <Flex align="center">
      <Flex.Item shrink={0} grow={0}>
        <Avatar />
      </Flex.Item>
      <Flex.Item shrink={1} grow={1}>
        <UserInfo />
      </Flex.Item>
    </Flex>
  );
}

它不会强制或停止使用 Flex。 Flex 之外的项目，但由于它是一个子组件，它确实暗示任何可能使用它的开发人员，它应该只用作 Flex 的子组件。

0 人点赞