React中如何将子组件Timer测量的时间值传递并保存到父组件state

核心逻辑是：父组件向子组件传递一个用于接收时间值的回调函数，子组件完成时间测量后，调用该回调将时间值作为参数回传给父组件，父组件在回调内部更新自身state即可完成存储。

具体实现步骤 #

1. 父组件侧定义回调方法并传递给子组件 #

注意类组件中需要提前绑定回调的this指向，避免调用时this指向错误

import React, { Component } from 'react';
import Timer from './Timer';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      measuredTime: 0 // 存储子组件回传的测量时间
    };
    // 绑定this指向，也可以用类属性箭头函数省略该步骤
    this.saveMeasuredTime = this.saveMeasuredTime.bind(this);
  }

  // 接收子组件传值并更新state的回调
  saveMeasuredTime(time) {
    this.setState({
      measuredTime: time
    });
    // 这里可以追加你需要的其他时间处理逻辑
  }

  render() {
    return (
      <div>
        <p>当前测量时间：{this.state.measuredTime}ms</p>
        {/* 将回调作为props传递给Timer子组件 */}
        <Timer onTimeFinish={this.saveMeasuredTime} />
      </div>
    )
  }
}

export default ParentComponent;

2. 子组件侧测量完成后调用父组件传入的回调 #

import React, { Component } from 'react';

class Timer extends Component {
  // 假设这是你计时结束后的触发方法，替换为你的实际计时逻辑
  handleTimerEnd = () => {
    const finalTime = 1560; // 替换为你实际测量得到的时间值
    // 调用父组件传过来的回调，把时间值传回去
    this.props.onTimeFinish(finalTime);
  }

  render() {
    return (
      <div>
        {/* 你原有Timer组件的计时相关UI和逻辑 */}
        <button onClick={this.handleTimerEnd}>停止计时</button>
      </div>
    )
  }
}

export default Timer;

注意事项 #

• 如果不想在constructor里绑定this，可以直接把回调方法写成类属性箭头函数：saveMeasuredTime = (time) => { this.setState({ measuredTime: time }) }，不需要额外绑定操作
• 如果需要同时传递多个和计时相关的参数，直接在回调调用时按顺序传入即可：this.props.onTimeFinish(finalTime, startTime, isTimeout)
• 回调的prop名可以自定义，只要父子组件保持一致即可

内容的提问来源于stack exchange，提问作者Kyano