如何用点语法创建React组件并实现派生组件共享主组件状态

问题原因 #

你当前写法拿不到主组件状态是两个机制问题导致的：

• 加了static修饰的属性是挂载到NavigationBar类本身的，和组件渲染后生成的实例完全独立，箭头函数的this指向模块定义时的作用域，根本不指向组件实例，自然读不到实例上的state。
• 即便去掉static，这两个函数组件本身是独立的渲染单元，React不会自动把主组件的实例上下文注入给子组件，不存在跨组件自动共享实例state的机制。

而且从组件设计逻辑上，静态属性本身就不可能直接访问实例状态：一个组件类可以生成多个同时存在的渲染实例，每个实例的state都是独立的，静态属性无法确定要绑定哪个实例的状态，这种写法本身就违背React组件实例隔离的设计原则。

实现方案 #

完全可以在不依赖Redux、Context的前提下实现你要的效果，采用React官方推荐的复合组件模式即可，保留单导入、点语法访问子组件的使用习惯：

1. 单独定义移动端、桌面端子组件，通过props接收主组件传递的状态
2. 将子组件作为静态属性挂载到主组件类上，保留点语法访问能力
3. 主组件渲染时通过props透传/React.cloneElement的方式，把自身状态注入给子组件

完整实现代码：

import React from 'react'

// 定义端子组件，通过props拿主组件状态
const MobileView = ({ navState, ...rest }) => {
  // 这里直接使用主组件传入的状态即可
  console.log('主组件状态:', navState)
  return <div className="nav-mobile">{/* 移动端导航内容 */}</div>
}

const DesktopView = ({ navState, ...rest }) => {
  console.log('主组件状态:', navState)
  return <div className="nav-desktop">{/* 桌面端导航内容 */}</div>
}

class NavigationBar extends React.PureComponent {
  // 挂载子组件为静态属性，支持点语法访问
  static MobileView = MobileView
  static DesktopView = DesktopView

  constructor(props) {
    super(props)
    this.state = {
      activeTab: 'home',
      userInfo: null
      // 其他业务状态
    }
  }

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

    // 用法1：主组件内部自动判断端型渲染，直接传状态
    // return isMobile 
    //   ? <MobileView navState={this.state} />
    //   : <DesktopView navState={this.state} />

    // 用法2：支持外部自定义嵌套写法，自动给子组件注入状态，无需手动传参
    return (
      <nav className="navigation-bar">
        {React.Children.map(children, child => {
          // 仅给挂载的官方子组件注入状态，避免污染其他元素
          if ([MobileView, DesktopView].includes(child.type)) {
            return React.cloneElement(child, {
              navState: this.state
            })
          }
          return child
        })}
      </nav>
    )
  }
}

export default NavigationBar

使用方式 #

完全符合你的导入需求，只需要导入主组件即可使用所有关联子组件：

import NavigationBar from './NavigationBar'

// 方式1：主组件自行判断端型渲染
<NavigationBar isMobile={navigator.userAgent.match(/Mobile/)} />

// 方式2：手动指定渲染对应端子组件
<NavigationBar>
  <NavigationBar.DesktopView />
</NavigationBar>

这种实现没有引入任何额外全局依赖，状态完全封装在NavigationBar内部维护，子组件和主组件的通信和普通父子组件传参逻辑完全一致，没有黑魔法，可维护性更强。

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