Отображение второго массива в JSX

1

В настоящее время я просматриваю некоторые данные, чтобы отобразить 4 точки в строке состояния в JSX в React Native. Тем не менее, у меня есть второй массив, который я бы хотел отобразить, так что каждая дата появляется там, где у меня есть даты необходимости комментариев, чтобы идти сюда, чтобы даты были ниже каждой точки, которая отображается.

Я просматриваю их ниже этого комментария, но мне нужно, чтобы они выходили выше, как часть первой карты. Есть ли способ сделать это?

const StatusBar = ({ projectData }) => {

  const statusBarPositions = [1, 2, 3];
  const currentStatusBarPosition = () => {
    let position;

    switch (projectData.get('state')) {
      case 'Project 1':
        position = 1;

        break;
      case 'Project 2':
        position = 2;
        break;
      case 'Project 3':
        position = 3;
        break;
      default:
        position = 0;
    }

    return position;
  };

  const projectDates = ['12/1', '3/1', '6/1', '9/1']

  return (
    <View>
      <View style={ styles.statusBarContainer }>
        <View style={ styles.progressDotFirst } />
        {
          statusBarPositions.map((statusBarPosition) => {
            return (
              <View key={ statePosition } style={ styles.statusBarLineContainer }>
                <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarLine, styles.statusBarActive] : styles.statusBarLine } />
                <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarDot, styles.statusBarActive] : styles.statusBarDot } />
              </View>
              <View>
                <Text>{ ***need dates to go here*** }</Text>
              </View>
            );
          })
        }
      </View>
      <View>
        {
          projectDates.map((date) => {
            return (
              <Text>{ date }</Text>
            )
          })

        }
      </View>
    </View>
  );
};

StatusBar.propTypes = {
  projectData: PropTypes.instanceOf(Object)
};

export default statusBar;
  • 0
    Синхронизированы ли оба массива по индексу? Другими словами, соответствует ли projectDates[i] correspond to дате statusBarPositions [i] `?
Теги:
react-native
jsx

1 ответ

1
Лучший ответ

array.map передает индекс массива в качестве второго аргумента. Если оба массива соответствуют друг другу по индексу, то вы можете использовать их для отображения дат (обратите внимание на индекс i в statusBarPositions.map((statusBarPosition, i)):

<View style={ styles.progressDotFirst } />
{
    statusBarPositions.map((statusBarPosition, i) => {
    return (
        <View key={ statePosition } style={ styles.statusBarLineContainer }>
        <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarLine, styles.statusBarActive] : styles.statusBarLine } />
        <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarDot, styles.statusBarActive] : styles.statusBarDot } />
        </View>
        <View>
        <Text>{ projectDates[i] }</Text>
        </View>
    );
    })
}
</View>
  • 0
    Это работает отлично. Большое спасибо!
  • 0
    Рад, что это помогло. Пожалуйста, не забудьте поднять голос и принять в качестве ответа!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню