React子组件内容无法渲染，请求排查问题原因

你的代码里有三个关键问题导致子组件内容无法渲染：

• 函数组件未返回JSX：Child组件是函数组件，必须通过return语句返回要渲染的JSX结构，你现在只写了JSX但没有返回，所以不会输出任何内容。
• 循环引用自身：Child组件里错误导入了自己import Child from "./Child"，这会造成循环引用，需要删除这行代码。
• 父组件未导入子组件：App组件中使用了<Child />但没有导入该组件，必须在App组件顶部补充导入语句。

修正后的代码 #

App组件：

import React from 'react';
import Child from './Child'; // 补充导入Child组件

const App = () => {
  return (
        <div className="ParentApp">
            <Child />
        </div>
    );
}

export default App;

Child组件：

import React from "react";

const Child = () => {
    console.log("Child component loaded");

    // 加上return返回JSX内容
    return (
        <div className="child">
            <h2>Child Component</h2>
        </div>
    );
};

export default Child;

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