Как сделать компонент, который будет полностью копировать свойства children?

Рейтинг: 0Ответов: 0Опубликовано: 26.04.2023

У меня есть компонент, который проверяет права. Выглядит он следующим образом(для примера, упростил логику его работы):

const Access = ({allow, children}) => {
  return allow ? <>{children}</> : null
}

Этот компонент оборачивает компонент, который будет отображаться в зависимости от наличия права. Примерно так:

return (
  <TabPanel>
    <Access allow={false}>
      <TabItem dataIndex={1}>
        <p>Первый таб</p>
      </TabItem>
    </Access>
      <TabItemdataIndex={2}>
        <p>Второй таб</p>
      </TabItem>
  </TabPanel>
)

Компонент TabItem возвращает JSX.

Вопрос в том, как сделать так, чтобы компонент проверки прав Acceess "прикидывался" компонентом TabItem . То есть полностью передавал пропсы через себя и отвечал только за то, нужно рендерить компонент или нет.

Нужно это для того, чтобы в компоненте TabPanel я через пропс children получил доступ к TabItem, а именно к пропсам этого компонента.

Ко второму табу я могу обратиться таким образом, а вот к первому - нет. Для наглядности прикреплю скрины:

  1. Скрин из плагина ReactDevTools. Таким образом выглядит структура табов.

введите сюда описание изображения

  1. Какие пропсы должны попадать в TabItem

введите сюда описание изображения

  1. Какие пропсы есть, при условие, что TabItem обернут в Access

введите сюда описание изображения

  1. Собственно пропсы, которые попадают в сам Access

введите сюда описание изображения

Одной из попыток решения было, скопировать все пропсы, которые приходят в Access, через React.cloneElement(), следующим образом:

const Access = ({allow, children, ...restProps}) => {
  return allow ? React.cloneElement(children, restProps) : null
}

Но children у Access так и остался не тронутым:

введите сюда описание изображения

Уже совсем запутался. Буду рад любой помощи.

Ответы

Ответов пока нет.