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

【问题标题】：How to get the value from a component to a variable如何从组件中获取值到变量
【发布时间】：2019-02-18 07:48:46
【问题描述】：

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

我已经尝试过喜欢这个

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

但我得到的响应是 [object, object]

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

如上所述，我正在访问此组件。

【问题讨论】：

试试const temp = Counter({end=500})，但是你为什么要这样尝试，没有意义
@VaibhavVishal 尝试过，但得到的值未定义
请提供您完整的组件代码，并清楚说明您要实现的目标。
你能说明你是如何尝试访问值end的吗？
如果您只是从组件中返回一个数字，请将其改为一个函数。组件应该返回一些可以渲染的 jsx。

标签： reactjs react-native

【解决方案1】：

如果您试图从您的自定义动画组件中获取动画值或任何值 Counter 组件，那么您可以将箭头函数作为回调传递，并且可以接收如下所述的值：

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

在您的 Counter 组件中，您可以从组件中的任何位置调用回调，如下所示：

this.props.callBack(value);

【讨论】：