Не отображается дочерний компонент React.js

Рейтинг: -1Ответов: 1Опубликовано: 19.08.2023

В консоле ошибок нет, но браузер не отображает компонент SliderPage

function SliderPage() {
   return (
      <>
         <div className='SliderPage'>hello</div>
      </>
   );
}

function Slider() {
   return (
      <>
         <div className='Slider'></div>
      </>
   );
}

export default function App() {
   return (
      <>
         <Slider>
            <SliderPage />
         </Slider>
      </>
   );
}
reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0

Вариант первый, использовать свойство children

function SliderPage() {
  return (
    <div className='SliderPage'>hello</div>
  );
}

function Slider({ children }) {
  return (
    <div className='Slider'>{ children }</div>
  );
}

export default function App() {
  return (
    <Slider>
      <SliderPage />
    </Slider>
  );
}

Вариант второй:

function SliderPage() {
  return (
    <div className='SliderPage'>hello</div>
  );
}

function Slider() {
  return (
    <SliderPage/>
  );
}

export default function App() {
  return (
    <Slider />
  );
}