React Native: как установить различные значения состояния из нескольких идентичных дочерних компонентов

Question

Я рендерил два ползунка на экране, один для максимального расстояния и один для возраста (который имеет две перетаскиваемые иконки). Я хочу установить соответствующие значения в моем хранилище Redux, основываясь на том, какой компонент используется в данный момент. Например, если пользователь перемещает ползунок диапазона возраста, он должен установить значения ageLow и ageHigh в хранилище, но если ползунок расстояния изменяется, устанавливается значение maxDistance.

Я мог бы установить maxDistance или возрастной диапазон в зависимости от того, является ли rangeEnabled истинным или ложным внутри Child, но это кажется очень негибким, если я захочу позже добавить еще один слайдер.

Каков наилучший способ достижения моей цели здесь?

Родительский компонент:

const Settings = ({ navigation }) => {
    return (
        <View style={styles.sliderView}>
            <LabeledSlider label="Maximum Distance" min={1} max={100} />
            <Space height={5} />
            <LabeledSlider label="Age Range" rangeEnabled={true} min={18} max={100} />
        </View>
    )
}

Дочерний компонент:

import RangeSlider from 'rn-range-slider'

const LabeledSlider = memo(({ label, rangeEnabled=false, min, max }) => {

  return (
    <View> 
        <View>
            // ... label
        </View>
        <RangeSlider
            style={{width: 350, height: 80}}
            rangeEnabled={rangeEnabled}
            gravity={'center'}
            min={min}
            max={max}
            step={1}
            labelStyle='none'
            selectionColor={SAFFRON}
            blankColor={INDIAGREEN}
            onValueChanged={(low, high) => {...something}/>   
    </View>
  )
})

Answer 1

const Settings = ({ navigation }) => {
  const handleChange = (type, low, high) => {
    // do stuff
  };

  return (
    <View style={styles.sliderView}>
      <LabeledSlider onChange={handleChange} type="type1" label="Maximum Distance"    min={1} max={100} />
      <Space height={5} />
      <LabeledSlider onChange={handleChange} type="type2" label="Age Range" rangeEnabled min={18} max={100} />
    </View>
  );
};

const LabeledSlider = memo(({ onChange, type, label, rangeEnabled = false, min, max }) => {
  return (
    <View>
      <View />
      <RangeSlider
        style={{ width: 350, height: 80 }}
        rangeEnabled={rangeEnabled}
        gravity="center"
        min={min}
        max={max}
        step={1}
        labelStyle="none"
        selectionColor={SAFFRON}
        blankColor={INDIAGREEN}
        onValueChanged={(low, high) => {
          onChange(type, low, high);
        }}
      />
    </View>
  );
});