如何检查父组件是否是特定组件？

Question

我对 ReactJS 还很陌生，但我正在慢慢落后。

我想创建一个智能组件，它应该检测它是否在另一个组件“内部”，然后以不同的方式呈现。

示例：

<Menu>
  <Item />
</Menu>

此处，项目组件应呈现为 anchor。

如果在任何其他组件或 div 中使用，它也应该简单地呈现为 div 。

有没有一种简单的方法来检查 React 中一个组件是否位于另一个组件内？

Answer 1

您可以通过传递一个 prop 来解决这个问题，说明该组件正在使用的上下文。

您的情况最简单的解决方案是，每当您在菜单中使用 item 组件时，您都会传递一个 prop。

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

然后在渲染内部有两个不同的返回语句（取决于 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

，以及菜单所需的额外行为。或者简单地将其包裹在锚标记内，如果这就是它的全部内容。

两种解决方案都有效，但后者（在我看来）更干净。更少的惊喜，更容易阅读，也更少可能出错（无需摆弄道具）。

Answer 2

在不传递 props 的情况下执行此操作的另一种方法是 使用上下文。

Menu

父级将提供此上下文，

Item

将消耗它 - 如果存在值，则意味着

Item

正在

Menu

内渲染，否则在

div

内渲染。