如何檢查父組件是否是特定組件？

Question

我對ReactJS很新，但是我慢慢地落後了。

我想創建一個智能組件，它應該檢測它是否在另一個組件的「內部」並呈現不同的內容。

實施例：

<Menu> 
    <Item /> 
</Menu> 

在此，項目組件應呈現爲錨。

如果在任何其他組件或div內使用，它應該簡單地呈現爲div。

有沒有簡單的方法來檢查，如果一個組件在裏面的另一個組件？

Answer 1

你可以通過傳遞一個道具，說着有關組件正在被使用的情況下解決這個問題。

你的情況最簡單的解決辦法是，當你在菜單中的項目組件，您傳遞一個道具。

render(){ 
    <Menu> 
    <Item insideMenu={true} /> 
    </Menu> 
} 

然後在渲染裏面有兩個不同的return語句（取決於insideMenu-prop）。

// Item.jsx 
render() { 
    if(this.props.insideMenu) 
    return (whatever) 

    return (whateverElse) 
} 

通常我不會推薦這個。在我看來，組件在可能的情況下應該是可重用的和通用的。在這種情況下，我認爲最好有兩個組件：Item和MenuItem。所以，那麼這將是

<Menu> 
    <MenuItem> 
</Menu> 

<AnythingElse> 
    <Item> 
</AnythingElse> 

裏面MenuItem，你很可能使用Item組成部分，也是，如果它們共享相同的行爲。因此，在這種情況下，MenuItem將呈現Item，以及菜單所需的額外行爲。或者簡單地將它包裹在錨標籤中，如果這就是它的全部。

這兩種解決方案都有效，但後者（在我看來）更清潔。更少的驚喜，更容易閱讀，更少可能出錯（不需要玩弄道具）。