如何将值从组件中获取到变量

Question

我有一个使用动画部分的组件。我想将返回值从组件到变量的返回值。

我试图喜欢这个

const temp = <Counter end={500}/>

，但我将响应作为[对象，对象]

const temp = <Counter end={needleAngle}/>;

计数器组件：

export default class Counter extends Component {
  static propTypes = {
    start: PropTypes.number,
    end: PropTypes.number.isRequired,
    digits: PropTypes.number,
    time: PropTypes.number,
    easing: PropTypes.string,
    onComplete: PropTypes.func,
    style: PropTypes.any,
  };
  static defaultProps = {
    start: 0,
    digits: 0,
    time: 1000,
    easing: 'linear',
  };
  state = { value: this.props.start };
  componentDidMount() {
    this.startTime = Date.now();
    requestAnimationFrame(this.animate.bind(this));
  }
  animate() {
    const { onComplete } = this.props;
    if (this.stop) {
      if (onComplete) onComplete();
      return;
    }
    requestAnimationFrame(this.animate.bind(this));
    this.draw();
  }
  draw() {
    const { time, start, end, easing } = this.props;
    const now = Date.now();
    if (now - this.startTime >= time) this.stop = true;
    const percentage = Math.min((now - this.startTime) / time, 1);
    const easeVal = eases[easing](percentage);
    const value = start + (end - start) * easeVal;
    this.setState({ value });
  }
  render() {
    const { digits } = this.props;
    const { value } = this.state;
    return (
      // <Text style={style}>{value.toFixed(digits)}</Text>
      value.toFixed(digits)
    );
  }
}

我正在加入此组件，如上所述。

Answer 1

如果您试图从您的情况下从自定义动画组件中获取动画值或任何值，则可以在Counter组件中以arrow函数作为回调传递，并可以接收到如下所述的值：

const temp = <Counter end={500} callBack={(value) => console.log(value)}/>

和您的Counter组件中您可以从类似的组件中的任何位置调用回调：

this.props.callBack(value);