Могу ли я повторно использовать один экземпляр компонента в нескольких местах на экране в реакции?

Question

У меня есть это приложение, которое я пишу на реагирующем языке, где у меня есть этот экран, который отображает около 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>

Answer 1

Вы можете извлечь компонент Menu в свой собственный компонент, а затем повторно использовать его в своих картах.Это означает, что вам нужно только определить свой Menu один раз, а затем использовать один и тот же компонент несколько раз (что создаст отдельный экземпляр Menu для каждой карты, действуя независимо друг от друга).

Вы также можете сделать то же самое для вашего Card компонента, что означает, что вам не нужно определять одно и то же несколько раз.Сделает ваш код намного чище и удобнее (ваши методы, которые вы определили в своих компонентах, будут выполняться только для этого экземпляра компонента, а не на глобальном уровне, как ваш код выше - например, this._closeMenu будет выполняться только для Menuэкземпляр, в котором он определен)

Узнайте, как можно извлечь и повторно использовать компоненты - https://caster.io/lessons/react-native-extracting-and-writing-react-native-components