1

因此，在我的 React Native 应用程序中，我想按照此处的指南集成此滑块。

问题是，我想访问setLowValue()的.current属性的方法，正如指导网站useRef()末尾所指定的那样。我打印到控制台并看到指定为函数，所以它肯定存在。为什么我无法访问它？.currentsetLowValue()

这是我的代码：

imports ... 

type Props = {
  size: number;
  setSize: (size: SizeState) => void;
};

const Slider: React.FC<Props> = ({size, setSize}) => {

  const slider = useRef(66); // set slider to inital value
  console.log('slider ', slider.current.initialLowValue); // doesn't work: "slider.current.initialLowValue is not a function"

  return (
    <View style={styles.container}>
      <RangeSlider
        ref={slider}
        max={70}
        min={50}
        step={1}
        initialLowValue={size} // I want to have access to this property
        value={size}
        onValueChanged={value => setSize({size: value})}
      />
    </View>
  );
};

function mapStateToProps(state: RootState) {
  return {
    height: state.sizeResult.size,
  };
}

const mapDispatchToProps = {
  setSize,
};

export default connect(mapStateToProps, mapDispatchToProps)(Slider);

帮助将不胜感激！

4

3 回答 3

4

ref 值首先在“componentDidMount”和“componentDidUpdate”生命周期状态上设置，这两个状态都发生在第一次渲染之后。

日志记录可能导致混淆的原因是日志可以/将在第一次渲染（在 componentDidMount 之前，使用初始 ref.current）和之后（使用正确定义的 ref.current，通过 ref'd 组件设置）发生。

这里的解决方案是在组件挂载后访问 ref，这可以通过 useEffect 挂钩来实现。

见：https ://reactjs.org/docs/refs-and-the-dom.html

tldr：

useEffect(() => {
  console.log(slider.current.initialLowValue);
}, [])
于 2020-03-30T10:21:41.783 回答
2

我建议将初始 ref 设置为null：

const Slider: React.FC<Props> = ({size, setSize}) => {

  const slider = useRef(null);

  console.log('slider ', slider.current); // null

  useEffect(() => {
    if (slider.current) {
      console.log('slider ', slider.current.initialLowValue); // size
    }
  }, []);

  return (
    <View style={styles.container}>
      <RangeSlider
        ref={slider}
        max={70}
        min={50}
        step={1}
        initialLowValue={size} // I want to have access to this property
        value={size}
        onValueChanged={value => setSize({size: value})}
      />
    </View>
  );
};
于 2020-03-30T14:20:28.553 回答
-1

试试这个

 <RangeSlider
      ref={(input) => { this.slider = input; }}
    .......
/>
于 2020-03-30T09:23:56.307 回答