反應：使用this.props.children或傳遞組件作爲具名道具

我處於構建需要渲染某些子組件的組件的情況。更具體地說，我有一個地圖組件，並且我希望顯示一個圖例組件。反應：使用this.props.children或傳遞組件作爲具名道具

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可以將地圖從關心是否需要渲染圖例或任何其他子控件中釋放，但它也會在Map組件中創建後門，即：將任意組件作爲子項傳遞的Map組件。

這是一個問題嗎？在渲染它們之前在父組件中檢查this.props.children是否很常見？如果是這樣，怎麼樣？

另外，造型呢？有了指定的道具，我可以定位/設計「孩子」，因爲他們被命名，我知道他們是什麼。使用React.Children，它是一組需要檢查的組件，以便它們可以定位，在這種情況下，使用this.props.children可以獲得什麼？

我已經看到第三方組件使用這兩種範例，但我很好奇在哪一個場景中選擇一個。

來源

2016-09-20 Danny Delott

您可以檢查兒童https://facebook.github.io/react/tips/children-props-type.html。在開發時，您還可以使用propTypes來幫助您檢查React.PropTypes.element或React.PropTypes.arrayOf（React.PropTypes.element）的子類型。 – huocp

我會建議使用children此：

的JSX語法很容易地顯示您的組件做什麼，只要看一眼渲染功能。如果你通過legend作爲道具，你不知道<Map/>會如何處理。
它使您可以將道具從呈現地圖及其子項的容器傳遞給子項。這又使得它更明顯的是與<Legend/>

檢查孩子發生聽起來像是你將實現一個大的switch-case語句來處理所有的特殊情況。使用children不會產生任何邊緣情況。

來源

2016-09-20 06:10:34 Scarysize

反應：使用this.props.children或傳遞組件作爲具名道具

回答

相關問題