Скрытие и вывод враппера в реакте

Question

Коллеги, помогите пожалуйста начинающему в реакт разобраться в следующем вопросе: как можно в следующем примере скрывать или выводить <ComponentWrapper> при помощи пропсы? То есть, есть некое приложение за работу которого отвечает некий <Component/> и по умолчанию мне обёртка над ним не нужна. Но в определённых ситуациях - на страницах, где этот компонент не может быть без данного враппера нужно её подключать.

const App = () {
  return (
    <ComponentWrapper>
      <Component/>
    </ComponentWrapper>
  );
}

Сам компонент выводится в другом месте и хотелось бы получить удобный функционал вроде:

<App isWrapper />

Answer 1

Можете попробовать так:

const Span = ({text}) => (<span>{text}</span>)

const ConditionalWrapper = ({isWrapper}) => {
  return (
    <React.Fragment>
      {
        isWrapper ?
        <div class='wrapper'>
          <Span text={'With wrapper'}/>
        </div> :
        <Span text={'Without wrapper'}/>
      }
    </React.Fragment>
  )
}

const App = () => {
  return (
    <React.Fragment>
      <ConditionalWrapper isWrapper={true}/>
      <ConditionalWrapper isWrapper={false}/>
    </React.Fragment>
  )
}

ReactDOM.render(
  <App />,
  document.body
)

.wrapper {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

БЛОГ НА HUSL

Скрытие и вывод враппера в реакте

Ответы (1 шт):