Реагировать: использовать this.props.children или передать компоненты как названные реквизиты

Question

Я в ситуации, когда я создаю компонент, который должен отображать некоторые дочерние компоненты. Более конкретно, у меня есть компонент Map, и на нем я хочу отобразить компонент Legend.

const Map = props => (
    <div id="map"> 
    { this.props.children } 
    </div> 
); 

// Usage: 
const MapWithLegend =() => (
    <div id="map-view"> 
    <Map><Legend /></Map> 
    </div> 
); 

// Usage: 
const MapWithoutLegend =() => (
    <div id="map-view"> 
    <Map /> 
    </div> 
); 

Однако, это также может быть выражено по имени реквизита:

const Map = ({ legend } => (
    <div id="map">{ legend }</div> 
); 

// Usage: 
const MapWithLegend =() => (
    <div id="map-view"> 
    <Map legend={Legend} /> 
    </div> 
); 

// Usage: 
const MapWithoutLegend =() => (
    <div id="map-view"> 
    <Map /> 
    </div> 
); 

Я не уверен, какой путь является лучшим с точки зрения масштабирования и повторного использования. В конечном счете, у нас будет больше, чем просто легенд, чтобы переложить карту, например: шкалы, средства управления увеличением/навигации и т. Д.

Имеет ли смысл использовать React.Children для этого или я должен использовать именованные реквизиты ?

Мою интуицию заключается в том, что использование this.props.children освобождает карту от заботы о том, нужно ли отображать легенду или любые другие дочерние элементы управления, но также создает бэкдор в компоненте Карта, то есть: передача произвольных компонентов в виде детей компонента карты.

Это беспокойство? Общепринято ли проверять this.props.children в родительском компоненте перед их рендерингом? Если да, то как?

Также, как насчет стилизации? С названным реквизитом я могу позиционировать/стилизовать «детей», так как они названы, и я знаю, что они собой представляют. С React.Children это массив компонентов, которые необходимо будет проверить, чтобы они могли быть расположены, и в этом случае, что я получу от использования this.props.children?

Я видел сторонние компоненты, использующие обе парадигмы, но мне любопытно, каковы сценарии, в которых один выбирает один за другим.

Answer 1

Я бы рекомендовал использовать children для этого:

1. Синтаксис JSX легко показывает вам, что ваш компонент делает, просто посмотрев на функции визуализации. Если вы пройдете legend в качестве опоры, вы не представляете, что сделает <Map/>.
2. Это позволяет передавать реквизиты детям из контейнера, который отображает карту и ее детей. Что еще раз делает более очевидным то, что происходит с <Legend/>

Осмотр детей звучит так, как будто вы реализуете большой оператор case-switch для обработки всех случаев краев. Использование children не приведет к появлению кромочных случаев.