React Native：如何从多个相同的子组件中设置不同的状态值

Question

我正在屏幕上渲染两个滑块，一个滑块用于最大距离，一个滑块用于年龄范围（具有两个可拖动图标）。我要根据当时使用的组件在Redux存储中设置这些相应的值。例如，如果用户滑动年龄范围滑块，则应在商店中设置ageLow和ageHigh值，但是如果更改了距离滑块，则将设置maxDistance值。

我可以根据Child内部的rangeEnabled是true还是false来设置maxDistance或年龄范围，但是如果我以后想在某个地方添加另一个滑块，这似乎非常不灵活。

在这里实现我的目标的最佳方法是什么？

父组件：

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>
  );
});