Tepki: this.props.children kullanın veya bileşenleri adlandırılmış olarak adlandırın

Question

Bazı alt bileşenleri oluşturması gereken bir bileşen yapıyorum. Daha spesifik olarak, bir Harita bileşenim var ve üzerinde bir Legend bileşeni görüntülemek istiyorum.

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> 
); 

Ancak bu da adlandırılan sahne ile ifade edilebilir:

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> 
); 

Ben ölçekleme ve yeniden kullanılabilirlik açısından en iyi hangi yolu emin değilim. Sonuç olarak, haritanın üzerine koymak için sadece efsanelerden daha fazlasına sahip olacağız, örneğin: ölçekler, yakınlaştırma/gezinme kontrolleri, vb ...

Bunun için React.Children'i kullanmak mantıklı mıdır, yoksa adlandırılmış sahne kullanmalı mıyım? ? çocuklar gibi keyfi bileşenleri geçen: yani

Sezgim this.props.children kullanarak bir efsane ya da başka herhangi bir çocuk denetimleri oluşturmak için ihtiyaç olup olmadığı konusunda endişe gelen Harita boşaltır olmasıdır, ama aynı zamanda Harita bileşeni içine bir arka kapı oluşturur Harita bileşeninin

Bu bir endişe mi? Oluşturmadan önce ana bileşende this.props.children denetlemek yaygın mıdır? Öyleyse nasıl?

Ayrıca, stil hakkında ne düşünüyorsunuz? Adından da anlaşılacağı üzere, "çocuklar" adını verdikleri için konumlandırabilir/stilleyebilirim ve ne olduklarını biliyorum. React.Children ile, denetlenmeleri gereken bir dizi dizidir, böylece konumlandırılabilirler, bu durumda this.props.children'u kullanarak ne kazanabilirim?

Her iki paradigmayı kullanarak üçüncü taraf bileşenleri gördüm, ancak birinin diğerini seçtiği senaryoların ne olduğunu merak ediyorum.

Answer 1

Bunun için children kullanarak öneriyoruz: JSX sözdizimi kolayca bileşen ne iş yaptığını gösterir

1. , sadece işlemek fonksiyonu bakarak. Bir destek olarak legend'u iletirseniz, <Map/> bununla ne yapacağını bilmiyorsunuz.
2. Haritaya ve onun çocuklarını oluşturan konteynırdan çocuklara sahne geçirmenizi sağlar. Tüm kenar davalarını büyük bir switch-case ifadesi uygulayacak gibi hangi yine <Legend/>

çocuk incelenmesi ile neler olduğu daha belirgin hale getirir geliyor. children kullanmak, herhangi bir kenar durumu üretmeyecektir.