React中<OneComponent.TwoComponent/>这种点连接组件的含义是什么？

这种写法表示TwoComponent是作为OneComponent的静态属性存在的组件，核心是把关联组件打包归类，通过父组件的命名空间来访问子组件。

常见实现方式 #

通常有两种写法来构建这种组件结构：

1. 先定义组件，再挂载属性

function OneComponent() {
  return <div>主组件内容</div>;
}

function TwoComponent() {
  return <div>关联子组件内容</div>;
}

// 将TwoComponent挂载到OneComponent的属性上
OneComponent.TwoComponent = TwoComponent;

export default OneComponent;

2. 导出时直接组合

function OneComponent() {
  return <div>主组件内容</div>;
}

function TwoComponent() {
  return <div>关联子组件内容</div>;
}

// 挂载后统一导出
OneComponent.TwoComponent = TwoComponent;
export default OneComponent;

这么写的好处 #

• 明确从属关系：当两个组件强关联（比如主组件和它的配套弹窗、工具栏），这种写法能清晰体现它们的关联，避免零散导入。
• 避免命名冲突：不用给组件起OneComponentRelated这类冗长名字，借助父组件的命名空间就能区分。

使用示例 #

导入后直接通过点语法调用：

import OneComponent from './components/OneComponent';

function App() {
  return (
    <div>
      <OneComponent />
      <OneComponent.TwoComponent />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Yerba Mate