Reactjs 如何从组件到变量获取值

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

我试着喜欢这个

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

const temp=

但我得到的回应是[对象，对象]

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

const temp=；

计数器组件：

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

导出默认类计数器扩展组件{
静态类型={
开始：PropTypes.number，
结束：需要PropTypes.number.isRequired，
数字：PropTypes.number，
时间：PropTypes.number，
类型：PropTypes.string，
onComplete:PropTypes.func，
样式：PropTypes.any，
};
静态defaultProps={
起点：0，
数字：0，
时间：1000，
“线性”，
};
state={value:this.props.start}；
componentDidMount（）{
this.startTime=Date.now（）；
requestAnimationFrame（this.animate.bind（this））；
}
制作动画（）{
const{onComplete}=this.props；
如果（这个。停止）{
如果（onComplete）onComplete（）；
返回；
}
requestAnimationFrame（this.animate.bind（this））；
这个.draw（）；
}
画（）{
const{time，start，end，easing}=this.props；
const now=Date.now（）；
如果（现在-this.startTime>=time）this.stop=true；
常量百分比=Math.min（（现在-this.startTime）/时间，1）；
const easeVal=缓解[缓解]（百分比）；
常量值=开始+（结束-开始）*easeVal；
this.setState（{value}）；
}
render（）{
const{digits}=this.props；
const{value}=this.state；
返回(
//{value.toFixed（数字）}
值。toFixed（位数）
);
}
}

---

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

如果您试图从您的自定义动画组件中获取动画值或任何值（在您的案例中为

计数器

组件），则您可以将箭头函数作为回调传递，并可以接收如下所述的值：

const temp=console.log（value）}/>

在

计数器

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

---

this.props.callBack（值）

试试

const temp=Counter（{end=500}）

，但是为什么你要这样做呢，没有sense@VaibhavVishal尝试过，但获得的值为未定义请提供组件的完整代码，并清楚说明您试图实现的目标。您能否显示您如何尝试访问值

end

？如果您只是从组件返回一个数字，请将其改为函数。组件应该返回一些可以呈现的jsx。