如何判断父组件是否为特定组件?
How to check if the parent component is a specific component?
我是 ReactJS 的新手,但我正在慢慢适应它。
我想创建一个智能组件,它应该检测它是否是 "inside" 另一个组件,然后以不同的方式呈现。
示例:
<Menu>
<Item />
</Menu>
此处,项目组件应呈现为 锚点。
如果在任何其他组件或 div 中使用,它也应该简单地呈现为 div。
在 React 中,是否有一种简单的方法来检查一个组件是否在另一个组件内?
你可以通过传递一个 prop 来解决这个问题,说明组件正在使用的上下文。
在您的情况下,最简单的解决方案是,每当您在菜单中使用项目组件时,您都会传递一个道具。
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
,以及菜单所需的额外行为。或者简单地将其包裹在锚标签内,如果仅此而已。
这两种解决方案都有效,但后者(在我看来)更清洁。惊喜更少,阅读更容易,出错的可能性也更少(无需兼顾道具)。
我是 ReactJS 的新手,但我正在慢慢适应它。
我想创建一个智能组件,它应该检测它是否是 "inside" 另一个组件,然后以不同的方式呈现。
示例:
<Menu>
<Item />
</Menu>
此处,项目组件应呈现为 锚点。
如果在任何其他组件或 div 中使用,它也应该简单地呈现为 div。
在 React 中,是否有一种简单的方法来检查一个组件是否在另一个组件内?
你可以通过传递一个 prop 来解决这个问题,说明组件正在使用的上下文。
在您的情况下,最简单的解决方案是,每当您在菜单中使用项目组件时,您都会传递一个道具。
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
,以及菜单所需的额外行为。或者简单地将其包裹在锚标签内,如果仅此而已。
这两种解决方案都有效,但后者(在我看来)更清洁。惊喜更少,阅读更容易,出错的可能性也更少(无需兼顾道具)。