Как правильно передать один компонент react в другой?

Question

[Андрей]

Делаю проект в ознакомительных с реактом целях.

Хочу сделать всплывающее окно - react-компонент - в которое можно было бы передавать другие компоненты.
Если пользователь нажал кнопку "Регистрация", появляется окно с формой регистрации, Если нажал кнопку "Купить" - окно с формой покупки... и т.д. По сути окно одно, контент в окне разный. Зачем создавать отдельное окно на каждый чих?

Сделал окно.
Сделал кнопку.

При клике по кнопке отправляется Action. Простой объект, призванный просто поменять стейт. Передавать в стейт компонент - плохая идея.
Ок. Просто записываю в стейт строку ( 'Authorization' ). Читаю эту строку в контейнере окна. Проверяю, если строка === 'Authorization' - передаю в компонент-представление в пропсах компонент Authorization. Если не принимать во внимание, что сама реализация этого какая-то не очень красивая, оно еще и не работает - компонент не отрисовывается в шаблоне.

Можно было бы в представление прокинуть название, сделать проверку и подставить соответствующий компонент, но проверять что-то в шаблоне, пихать туда логику.... это совсем печаль.

Как было бы правильно реализовать это? Очень желательно, чтобы в компонент окна не импортировать никакие компоненты, как сделано у меня сейчас, а просто как-то пробрасывать нужный компонент, типа по клику "создать стандартное окно и вставить в него тот компонент, который я сейчас передам".

Answer 1

[Frozen Coder]

Сильно не вникал, но кратко, чтобы передать один компонент в дргой и там его отрисовать, следует передавать компонент через функцию и вызывать её там, где надо отобразить.
Там где отрисовывается Parent

let component = () => ( <ComponentChild /> );
...
<Parent child={ component } />

Внутри Parent в методе

render(){
   return( 
      { this.props.child && this.props.child() }
   )
}

Как-то так. Таким образом определять какой компонент будет отрисовываться можно где-то вверху дерева в умном компоненте, а вниз глупым компонентам-отобразителям передавать его как props через параметр-переменную-функцию.

Comments

[MCjores]

Можно обжечься на этом моменте, например если используете input с данными извне(в пропсе) в качестве "component". Не забудьте обернуть его в useCallback.

let component = useCallback(() => ( <ComponentChild /> ),[])
...