Phản ứng: Sử dụng thành phần này.props.children hoặc pass như các đạo cụ có tên

Question

Tôi đang ở trong tình huống mà tôi đang xây dựng một thành phần cần hiển thị một số thành phần con. Cụ thể hơn, tôi có một thành phần Map và trên đó tôi muốn hiển thị một thành phần 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> 
); 

Tuy nhiên, điều này cũng có thể được biểu diễn với đạo cụ tên là:

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

Tôi không chắc đó là cách tốt nhất về mở rộng quy mô và tái sử dụng. Cuối cùng, chúng tôi sẽ có nhiều hơn chỉ là truyền thuyết để đưa lên bản đồ, ví dụ: quy mô, điều khiển thu phóng/điều hướng, v.v ...

Sử dụng React.Children có nên sử dụng công cụ này hay không ?

Trực giác của tôi là sử dụng this.props.children giải phóng Bản đồ khỏi việc quan tâm đến việc truyền thuyết hay bất kỳ điều khiển con nào khác, nhưng nó cũng tạo ra một cửa sau vào thành phần Bản đồ. của thành phần Bản đồ.

Đó có phải là mối quan ngại không? Có thường xuyên kiểm tra this.props.children trong thành phần chính trước khi hiển thị chúng không? Nếu vậy, làm thế nào?

Ngoài ra, còn kiểu dáng thì sao? Với đạo cụ được đặt tên, tôi có thể định vị/tạo kiểu cho "trẻ em" vì chúng được đặt tên và tôi biết chúng là gì. Với React.Children, đó là một loạt các thành phần cần được kiểm tra để chúng có thể được định vị, trong trường hợp nào tôi thu được từ việc sử dụng this.props.children?

Tôi đã nhìn thấy các thành phần của bên thứ ba sử dụng cả hai mô hình, nhưng tôi tò mò là những tình huống trong đó một trong những lựa chọn khác.

Answer 1

tôi sẽ khuyên bạn sử dụng children cho việc này:

1. Cú pháp JSX dễ dàng cho bạn thấy những gì thành phần của bạn không, chỉ cần nhìn vào render chức năng. Nếu bạn vượt qua legend như một biện pháp chống đỡ, bạn không có ý tưởng gì <Map/> sẽ làm gì với điều đó.
2. Nó cho phép bạn truyền đạo cụ cho trẻ em từ thùng chứa, hiển thị Bản đồ và các con của nó. Mà một lần nữa làm cho nó rõ ràng hơn những gì đang xảy ra với <Legend/>

Kiểm tra trẻ có vẻ như bạn sẽ thực hiện một tuyên bố chuyển đổi lớn để xử lý tất cả các trường hợp cạnh. Sử dụng children sẽ không tạo ra bất kỳ trường hợp cạnh nào.