javascript - 为什么子组件没有渲染？

Question

我在APP.js组件中编写了以下代码:

import React from "react";
import Exam from "./exam.js";

export default function App() {
   return (
      <Exam>
        <h1>hashemi</h1>
      </Exam>
   );
}

我在 exam.js 组件中编写了以下代码:

import React from "react";

const Exam = ({child}) => {
  return (
    <div>
      <p>parastoo</p>
      {child}
    </div>
  );
};
export default Exam;

但输出显示:

parastoo

有什么问题吗？ child 为什么不<h1>渲染？

Answer 1

子组件通过 children 属性传递给组件，即使只有一个子组件:

const Exam = ({children}) => {
  return (
    <div>
      <p>parastoo</p>
      {children}
    </div>
  );
};