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

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