Как сделать компонент, который будет полностью копировать свойства 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
так и остался не тронутым:
Уже совсем запутался. Буду рад любой помощи.