时间戳

首页 > 解决方案 > 我可以在屏幕上的多个位置重用组件的单个实例以做出反应吗？

reactjs - 我可以在屏幕上的多个位置重用组件的单个实例以做出反应吗？

问题描述

我有这个应用程序，我正在用 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>

标签： reactjsreact-nativemobilefrontendreact-native-paper

解决方案

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

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

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

推荐阅读