如何将 Prop 从类组件传递到功能组件

Question

我正在尝试构建一个秒表，然后使用秒表中的时间在文本输入中显示小时和分钟，并将其添加到使用中

这是秒表的类组件

class StopwatchContainer extends Component {

  constructor(props){
      super(props);

      this.state = {
          Tmin: 0,
          Tsec: 0,
          Tmsec: 0,
          Thour: 0
      }

      this.lapArr = [];

      this.interval = null;
  }

  handleToggle = () => {
      this.setState(
          {
              start: !this.state.start
          },
          () => this.handleStart()
      );
  };

 

  handleStart = () => {
      if (this.state.start) {
          this.interval = setInterval(() => {
              if (this.state.Tmsec !== 99) {
                  this.setState({
                      Tmsec: this.state.Tmsec + 1
                  });
              } else if (this.state.Tsec !== 59) {
                  this.setState({
                      Tmsec: 0,
                      Tsec: ++this.state.Tsec
                  });
              } else if (this.state.Tmin !== 59) {
                  this.setState({
                     Tmsec: 0,
                      Tsec: 0,
                     Tmin: ++this.state.Tmin
                  });
              }
              else{
                  this.setState({
                      Tmsec:0,
                      Tsec:0,
                      Tmin:0,
                      Thour: ++this.state.Thour

                  }  );

              }
          }, 1);

      } else {
          clearInterval(this.interval);
         
      }
  };

  handleReset = () => {

      this.setState({
          Tmin:0,
          Tsec: 0,
          Tmsec: 0,
          Thour: 0,
          start: false
         
      });

      clearInterval(this.interval);

      this.lapArr = [];
  };

  

  render(){
      return(
          <View style={styles.container}>

              <View style={styles.parent}>
                  <Text style={styles.child}>{padToTwo(this.state.Thour) + ' : '}</Text>
                  <Text style={styles.child}>{padToTwo(this.state.Tmin) + ' : '}</Text>
                  <Text style={styles.child}>{padToTwo(this.state.Tsec)}</Text>
              </View>

              <View style={styles.buttonParent}>                    
              <TouchableOpacity style={styles.button} onPress={this.handleToggle}><Text style={styles.buttonText}>{!this.state.start? 'Start': 'Pause'}</Text></TouchableOpacity>
              <TouchableOpacity style={styles.button} onPress={this.handleReset}><Text style={styles.buttonText}>Stop</Text></TouchableOpacity>
                 
              </View>

          </View>
      );
  }

  


}

我想将秒表 (Tmin Tsecs Thour) 中的 3 个值传递给以下 3 个使用状态，然后当我按下上面秒表中的按钮时，在文本输入中显示这些值（使用输入，以便可以编辑最终时间）

const[timerMins,setTimerMins]=useState("0")
        const [timerSecs,setTimerSecs]=useState("0")
    const[timerHours,setTimerHours]=useState("0")

附带定时器功能

function IncidentalTimer({navigation,props}) {


  
  let Email = global.MyEmail
 let Pwd = global.Pwd
let CiD = global.MyCID


  const [serverClients, setServerClients] = useState([]);
  const [serverTasks, setServerTasks] = useState([]);
  const [serverUserRates, setServerUserRates] = useState([]);
  const [date, setDate] = useState(moment(new Date()).format("DD/MM/YYYY"))

  const[task,setTask]=useState('')
  const[selectedtask,setselectedTask]=useState('')
  const[client,setClient]=useState('')
  const[selectedClient,setSelectedClient]=useState('')
  const[hours,setHours]=useState('')
  const[mins,setMins]=useState('')
  const[UserRate,setUserRate]=useState('')
  const[SelectedUserRate,setSelectedUserRate]=useState('')
  const[Description,setDescription]=useState('')
  const[Logging,islogging]=useState(false)
  const[alerted,isalerted]=useState(false)
  const[loading,isloading]=useState(false)

//Timer


   const[timerMins,setTimerMins]=useState("0")
    const [timerSecs,setTimerSecs]=useState("0")
const[timerHours,setTimerHours]=useState("0")











  useEffect(() => {
   isloading(true)
    fetch('https://www.smartpractice.co.za/app-clients-react.asp?MyForm=Yes&ClientID='+CiD+'&Username='+Email+'&Pwd='+Pwd+'&LogType=I')
      .then((response) => response.json())
      .then((responseJson) => {
        //Successful response from the API Call
        setServerClients(responseJson.results);
        isloading(false)
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);
  useEffect(() => {
    fetch('https://www.smartpractice.co.za/app-tasks-react.asp?MyForm=Yes&ClientID='+CiD+'&Username='+Email+'&Pwd='+Pwd+'&LogType=I')
      .then((response) => response.json())
      .then((responseJson) => {
        //Successful response from the API Call
        setServerTasks(responseJson.results);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);
  useEffect(() => {
    fetch('https://www.smartpractice.co.za/app-user-rates-react.asp?MyForm=Yes&ClientID='+CiD+'&Username='+Email+'&Pwd='+Pwd+'&LogType=I')
      .then((response) => response.json())
      .then((responseJson) => {
        //Successful response from the API Call
        setServerUserRates(responseJson.results);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);