Почему дочерний компонент не отображается?

Question

Я написал следующий код в APP. js компонент:

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

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

И я написал следующий код в экзамен. js component:

import React from "react";

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

Но выходные данные показывают это:

parastoo

В чем проблема? Почему ребенок <h1> не рендерит?

Answer 1

Дочерние компоненты передаются через опору children в компонент, даже если есть только один дочерний компонент:

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

Answer 2

В React вы можете передавать реквизиты или свойства дочерним компонентам. Скажем, у вас есть компонент App, который отображает дочерний компонент с именем CurrentDate, который является функциональным компонентом без сохранения состояния. Вы можете передать CurrentDate свойство даты, написав:

const CurrentDate = (props) => {
  return (
    <div>
      { /* change code below this line */ }
      <p>The current date is: {props.date} </p>
      { /* change code above this line */ }
    </div>
  );
};

Calender - это родительский компонент, вы можете передать Calender свойство даты, написав

class Calendar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>What date is it?</h3>
        { /* change code below this line */ }
        <CurrentDate date={Date()}/>
        { /* change code above this line */ }
      </div>
    );
  }
};

Answer 3

Это называется props.children. Читайте в разделе документации Содержание .

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

Надеюсь, это поможет!