在多个组件中触发相同的功能
Posted
技术标签:
【中文标题】在多个组件中触发相同的功能【英文标题】：Same Function is Triggered IN Multiple Components 【发布时间】：2020-04-27 19:36:45 【问题描述】：我正在使用react-native-material-menu 的弹出窗口来显示菜单选项。
但问题是，它不适用于多种场景。
我的意思是当我点击第一个菜单按钮时，会触发相同的方法，因此每次都会打开相同的菜单。
处理这种特殊情况的更好方法应该是什么。
这里是Snack
_menu = null;
setMenuRef = ref =>
this._menu = ref;
;
hideMenu = () =>
this._menu.hide();
;
showMenu = () =>
this._menu.show();
;
this.state.clientsList.map((item) =>
return (
<View style=styles.caseItem >
<Card style=styles.card>
<CardItem>
<Body>
<View style=styles.rowTitle>
<Text style=styles.title>item.FullName</Text>
<Menu
ref=this.setMenuRef
button=<Icon type="Feather" name="more-vertical" onPress=this.showMenu style= fontSize: 20, color: '#555' />
>
<MenuItem onPress=this.hideMenu>View</MenuItem>
<MenuItem onPress=this.hideMenu>Edit</MenuItem>
<MenuItem onPress=this.hideMenu>Delete </MenuItem>
</Menu>
</View>
<View>
<Text style=styles.lbl>Email: <Text style=styles.lblValue>item.EmailID</Text></Text>
<Text style=styles.lbl>Client Type: <Text style=styles.lblValue>item.ClientType</Text></Text>
</View>
</Body>
</CardItem>
</Card>
</View>
);
)
【问题讨论】：
【参考方案1】：您对所有菜单组件使用相同的引用
你必须为每个菜单使用不同的参考。
-
最佳方法：
为 Menu 创建 HOC 并在其中处理它们的第一种方法。
-
中等
或为菜单列表创建动态Ref in React
-
仅用于运行代码
第三个是为每个菜单创建参考
_menu1 = null;
_menu2 = null;
_menu3 = null;
【讨论】：
【参考方案2】：您每次都调用相同的ref。我没有使用你提到的库，但如果它必须依赖 ref，你可以创建一个引用列表，语法在这个 post 中。
【讨论】：
以上是关于在多个组件中触发相同的功能的主要内容，如果未能解决你的问题，请参考以下文章