Как сделать компонент, который будет полностью копировать свойства children?
У меня есть компонент, который проверяет права. Выглядит он следующим образом(для примера, упростил логику его работы):
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, а именно к пропсам этого компонента.
Ко второму табу я могу обратиться таким образом, а вот к первому - нет. Для наглядности прикреплю скрины:
- Скрин из плагина ReactDevTools. Таким образом выглядит структура табов.
- Какие пропсы должны попадать в
TabItem
- Какие пропсы есть, при условие, что
TabItemобернут вAccess
- Собственно пропсы, которые попадают в сам
Access
Одной из попыток решения было, скопировать все пропсы, которые приходят в Access, через React.cloneElement(), следующим образом:
const Access = ({allow, children, ...restProps}) => {
return allow ? React.cloneElement(children, restProps) : null
}
Но children у Access так и остался не тронутым:
Уже совсем запутался. Буду рад любой помощи.




