Блог

Главная - Вопросы по программированию - Передача HTML-элемента в качестве реквизита с другими реквизитами

Передача HTML-элемента в качестве реквизита с другими реквизитами

javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть компонент, в котором мне нужно передать HTML-элемент в качестве реквизита другому элементу

 const MyText = () => {
     return (
          <>
               <h1>Sample heading</h1>
          </>
     )
}

return (
    <div>
      <MyComponent Text={MyText} onClose={() => setShow(false)} show={show} />
    </div>
  );

MyComponent.js

 export default function MyComponent(props) {
  return (
    <>
    {props.Text}
    </>
  );
}

Проблема: я ничего не получаю на экране. Я что-то здесь упускаю?

Комментарии:

1. Вам нужно передать so MyText как компонент, а не функцию -> Text={<MyText/>} . См. Раздел Композиция против наследования

2. Это также звучит немного излишне сложно. Компоненты должны (в идеале) быть как можно более тупыми. Разве вы не можете просто передать текст и позволить компоненту отображать его внутри заголовка?

3. @Andy Я бы согласился с вами, если бы так выглядел его производственный код, но, похоже, это упрощенный код для демонстрационных целей, и заголовок правильно приведен только в качестве примера.

4. Я бы спросил «почему», даже если это не производственный код. @MatthewKwong. Или, возможно, «в чем проблема, которую пытается решить OP?».

5. @Andy Ну, «проблема» буквально в самом вопросе. Он хочет передать компонент / HTML-элемент другому компоненту через props и отобразить его.

Ответ №1:

Есть два способа.

Вариант 1: передача типа компонента (или класса, если вы исходите из фона ООП)

 const MyText = () => {
  return (
    <>
      <h1>Sample heading</h1>
    </>
  )
}

return (
  <div>
    <MyComponent Text={MyText} onClose={() => setShow(false)} show={show} />
  </div>
);


const MyComponent = ({ Text }) => {
  return (
    <>
      <Text />
    </>
  );
}

Вариант 2: передача компонента (или экземпляра, если вы исходите из фона ООП)

 const MyText = () => {
  return (
    <>
      <h1>Sample heading</h1>
    </>
  )
}

return (
  <div>
    <MyComponent text={<MyText />} onClose={() => setShow(false)} show={show} />
  </div>
);


const MyComponent = ({ text }) => {
  return (
    <>
      {text}
    </>
  );
}
Метки: