React - 组件内容未通过

Question

我承认我对 React 比较陌生，但我只是试图将内容从子组件拉到父应用程序组件，但它没有拉入内容，我不明白为什么。

由于我添加到子组件的 console.log 工作正常，因此它肯定已链接，但它没有构建我添加到显示的简单 JSX 标签：

应用程序组件：

import React from 'react';

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

export default App;

子组件：

import React from "react";

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

    <div className="child">
        <h2>Child Component</h2>
    </div>
};

export default Child;

就是这样。我已经使用

npx create-react-app app-name

在 VScode 终端中构建了 React 应用程序，并使用

npm i

获取了依赖项，所以没什么特别的，但我仍然不明白为什么它不显示内容。

请帮忙解决我做错了什么？

Answer 1

您没有在子组件中返回 JSX。

使用以下内容，注意

return

：

import React from "react";

const Child = () => {
    console.log("Child component loaded");
    
    return (
        <div className="child">
            <h2>Child Component</h2>
        </div>
    );
};

export default Child;