Как я могу уменьшить коды в React Native?

Question

Что я пытаюсь сделать

Мой текущий код такой:

import React from 'react';
import {
  Container, Header, Body, View, Content, Title, Text, Left, Right
} from 'native-base';
import 'react-native-gesture-handler';
import Fire from 'app/src/Fire';
import {
  StyleSheet, Image, TouchableOpacity,
} from 'react-native';

export default class All extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
    };
  }

  async componentDidMount() {
    const querySnapshot = await Fire.shared.getItems(1);
    const items = await Fire.shared.pushItems(querySnapshot);
    this.setState({ items });
  }

  render() {
    const { items } = this.state;
    return (
      <Container>
        <View>
          {items.map((item) => (
            <Image
              source={{ uri: item.first_img_url }}
            />
            <View>
              <Text>{item.name}</Text>
            </View>
          ))}
        </View>
      </Container>
    );
  }
}

У меня есть другой компонент, который имеет почти такой же код, как и выше .

Различия заключаются в имени класса и

await Fire.shared.getItems(1);

или

await Fire.shared.getItems(2);

Я знаю, что должен объединить один и тот же код в один компонент.

Буду признателен, если вы дадите мне какие-либо советы или рекомендации:)

Answer 1

Вы можете извлечь этот код и передать число 1 или 2. в реквизите.

import React from 'react';
import {
  Container, Header, Body, View, Content, Title, Text, Left, Right
} from 'native-base';
import 'react-native-gesture-handler';
import Fire from 'app/src/Fire';
import {
  StyleSheet, Image, TouchableOpacity,
} from 'react-native';

export default class All extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
    };
  }

  async componentDidMount() {
    const querySnapshot = await Fire.shared.getItems(this.props.nbrOfItems);
    const items = await Fire.shared.pushItems(querySnapshot);
    this.setState({ items });
  }

  render() {
    const { items } = this.state;
    return (
      <Container>
        <View>
          {items.map((item) => (
            <Image
              source={{ uri: item.first_img_url }}
            />
            <View>
              <Text>{item.name}</Text>
            </View>
          ))}
        </View>
      </Container>
    );
  }
}

Вы можете вызвать этот компонент в любом компоненте, подобном этому

<All nbrOfItems={1} />

Или

<All nbrOfItems={2} />