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

Question

我对ReactJS很新，但我正慢慢支持它。

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

示例：

<Menu>
  <Item />
</Menu>

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

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

如果组件在React中的另一个组件内，是否有一种简单的方法可以检查？

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，以及菜单所需的额外行为。或者简单地将它包装在一个锚标签内，如果这就是它的全部内容。

两种解决方案都有效，但后者（在我看来）更清洁。更少的惊喜，更容易阅读，更少可能出错（不需要玩弄道具）。