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

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

React Native: how to set different state values from multiple identical child components

reactjs

react-native

redux

react-component