我可以在屏幕上的多个位置重用组件的单个实例吗？

Posted 2023-02-22

【中文标题】我可以在屏幕上的多个位置重用组件的单个实例吗？

【英文标题】：can i reuse a single instance of a component at multiple places on a screen in react?

【发布时间】：2019-10-28 19:45:51

【问题描述】：

我有这个应用程序，我正在用 react-native 编写，我有这个屏幕，它显示大约 50-100 个图像和一些与它们相关联的操作按钮，包括一个弹出菜单（与每个相关联的一个） .有没有一种方法可以让所有图像使用相同的弹出菜单（相同的实例）？

             <View>
             // react-native-paper Card Component
               <Card style=styles.card>
                <Card.Content style=styles.cardContent>
                  <Card.Cover
                    style= height: 60, width: 60 
                    source=
                      item.avatar ||
                      (item.gender === 'male'
                        ? require('../../assets/male.jpeg')
                        : require('../../assets/female.jpeg'))
                    
                  />
                  <Caption style=styles.title>item.name</Caption>
                </Card.Content>
                <Card.Actions>
                  <Avatar.Text
                    style= backgroundColor: 'skyblue' 
                    size=24
                    label=`#$item.id`
                  />
                 // react-native-paper Menu Component
                 // can i somehow use a single component for all cards?
                  <Menu
                    visible=this.state.visible
                    onDismiss=this._closeMenu
                    anchor=
                      <IconButton
                        icon="menu"
                        theme=theme
                        size=20
                        onPress=() => console.log('Pressed')
                      />
                    
                  >
                    <Menu.Item onPress=() =>  title="Item 1" />
                    <Menu.Item onPress=() =>  title="Item 2" />
                    <Divider />
                    <Menu.Item onPress=() =>  title="Item 3" />
                  </Menu>
                </Card.Actions>
              </Card>
                  .
                  .
          //same card multiple times
                  .
                  .
             </View>

【参考方案1】：

您可以将Menu 组件提取到您自己的自定义组件中，然后在您的卡片中重复使用它。这意味着您只需定义一次Menu，然后多次使用该组件（这将为每张卡创建一个单独的Menu 实例，彼此独立运行）。

您也可以对 Card 组件执行相同的操作，这意味着您不必多次定义相同的内容。将使您的代码更清晰，更有用（您在组件中定义的方法将仅针对该组件实例执行，而不是在全局级别上执行，因为您的上述代码将 - 例如 this._closeMenu 将仅针对 Menu 执行它定义的实例）

在此处查看如何提取和重用您的组件 - https://caster.io/lessons/react-native-extracting-and-writing-react-native-components

【讨论】：

实际上，如果可能的话，我只想为所有卡片使用菜单组件的一个实例。应该有可能因为菜单一次只能打开一张卡。寻找某种方式在所有卡片之间共享菜单。

@Jagga 我认为这在 React 中没有意义。虚拟 DOM 的意义在于它将您从 DOM 中完全抽象出来，因此如果“实例”指的是菜单的已加载 DOM 子树，您不必担心：React 会为您处理它。 Jono 的答案应该是“重用”菜单组件的正确方法。