导入时父组件为何为null？如何在Hello组件中访问App静态变量

咱们先搞清楚核心问题：App打印成null大概率是循环导入或者组件未完成初始化就被引用导致的，尤其是当App和Hello组件互相导入时，很容易出现这种“组件还没完全定义就被调用”的情况。接下来咱们一步步解决：

1. 最稳妥方案：抽离共享静态变量 #

如果只是需要访问App.myVar这个静态值，最直接的方式是把它从组件里抽离到独立模块，彻底避免组件间的循环依赖：

创建一个独立的常量文件，比如appConstants.js：

// appConstants.js
export const myVar = 1;

然后在App.js和Hello.js里分别导入使用：

// App.js
import React from 'react';
import Hello from './Hello';
import { myVar } from './appConstants';

class App extends React.Component {
  render() {
    return <Hello />;
  }
}

// 如果你需要在App上挂载静态变量，也可以同步一下
App.myVar = myVar;

export default App;

// Hello.js
import React from 'react';
import { myVar } from './appConstants';

class Hello extends React.Component {
  componentDidMount() {
    console.log(myVar); // 直接拿到1，完全不用依赖App组件
    // 如果必须要通过App访问，确保App正确导入且无循环后，再调用
    // import App from './App';
    // console.log(App.myVar);
  }

  render() {
    return <div>Hello</div>;
  }
}

export default Hello;

2. 不抽离模块：确保App完全初始化后再访问 #

如果不想新增文件，那就要保证Hello组件访问App时，App已经被完全定义好，同时避免循环导入：

调整组件定义与导出顺序 #

// App.js
import React from 'react';
import Hello from './Hello';

// 先完整定义App组件
class App extends React.Component {
  render() {
    return <Hello />;
  }
}

// 再挂载静态变量
App.myVar = 1;

// 最后导出
export default App;

// Hello.js
import React from 'react';
import App from './App';

class Hello extends React.Component {
  // 尽量在组件挂载后访问（此时App已经完成导出）
  componentDidMount() {
    console.log(App); // 现在能正确拿到App组件
    console.log(App.myVar); // 输出1
  }

  render() {
    return <div>Hello</div>;
  }
}

export default Hello;

⚠️ 注意：如果App和Hello存在互相依赖（比如App里用Hello，Hello里又必须用App），这种结构本身就不合理，还是推荐用第一种抽离常量的方式，从根源上避免循环问题。

3. 函数组件版本的处理 #

如果你的组件是函数式写法，静态变量直接挂载在函数上即可：

// App.js
import React from 'react';
import Hello from './Hello';

function App() {
  return <Hello />;
}

App.myVar = 1;
export default App;

// Hello.js
import React, { useEffect } from 'react';
import App from './App';

function Hello() {
  // 用useEffect模拟组件挂载后的时机
  useEffect(() => {
    console.log(App);
    console.log(App.myVar); // 输出1
  }, []);

  return <div>Hello</div>;
}

export default Hello;

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