面试使用Codepen时React子组件未渲染，如何解决？

嘿，我懂你遇到的困扰了！在Codepen里写的React代码只显示了"hello"，<Jack />组件完全没出来，其实就是两个小细节没处理对：

1. 用了过时的React渲染API #

React从v0.14版本开始，就把DOM渲染相关的功能拆分到ReactDOM独立库中了，你写的React.render()是非常老旧的写法——在现在的React版本里根本不存在这个方法！这就导致组件渲染流程没走全：虽然<Application />里的文本能显示，但子组件<Jack />没被正确挂载。

2. 组件定义顺序（可选但更规范） #

你先写了<Application />再定义<Jack />，虽然ES5环境下类声明会有变量提升不会报错，但把被依赖的子组件放在父组件前面，代码逻辑会更清晰，也能避免一些潜在的作用域问题。

修正后的完整代码 #

适配React 17及以下版本 #

首先在Codepen的设置里，确保同时引入React和ReactDOM（可以直接选Codepen自带的"React + ReactDOM"预设），然后替换代码为：

// 先定义子组件
class Jack extends React.Component {
  render() {
    return (
      <div> Goodbye </div>
    )
  }
}

class Application extends React.Component {
  render() {
    return <div> hello <Jack /> </div>
  }
}

// 改用ReactDOM的渲染方法
ReactDOM.render(<Application />, document.getElementById('app'));

适配React 18+版本 #

React 18推出了新的根APIcreateRoot，推荐用这个更现代的写法：

class Jack extends React.Component {
  render() {
    return (
      <div> Goodbye </div>
    )
  }
}

class Application extends React.Component {
  render() {
    return <div> hello <Jack /> </div>
  }
}

// 新的渲染方式
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<Application />);

改完之后刷新Codepen，就能同时看到"hello"和"Goodbye"啦！

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