Javascript 从另一个组件对React组件的特定实例调用方法

我想做一个简单的波莫多罗计时器。我需要让暂停和停止按钮工作。 我定义了一个名为“Timer”的单独组件，并添加了两个按钮：“Pause”和“Stop”，这显然会影响计时器的状态

按下相应按钮时，如何调用计时器的停止和暂停方法？

我知道我可以通过简单地在Timer类中包含按钮来实现这一点，但我想学习如何在将来实现类似的功能，并且我希望保持计时器的计数器部分独立

代码如下：

import React from 'react'
import { Text, View, Button, StyleSheet } from 'react-native';
import { Constants } from 'expo';

class Timer extends React.Component{
  constructor (props){
    super(props)
    this.state = {
      minutes: props.minutes,
      seconds: props.seconds,
      count: 0,
    }
  }

  dec = () => {
      this.setState(previousState => {
        if (previousState.seconds==0){
          return {
            minutes: previousState.minutes-1,
            seconds: 59,
            count: previousState.count+1,
          }
        }
        else{
          return{
            minutes: previousState.minutes,
            seconds: previousState.seconds-1,
            count: previousState.count+1,
          }
        }
      });
  }
  componentDidMount (){
    setInterval(this.dec,1000);
  }

  render (){
    return(
      <View style = {{flexDirection: 'row'}}>
        <Text style = {styles.timerCount}> {this.state.minutes}</Text>
        <Text style = {styles.timerCount}>:</Text>
        <Text style = {styles.timerCount}> {this.state.seconds} </Text>
      </View>
      )
  }
   stop (){
    console.log('stop')
  }

  pause (){
   console.log('pause')
 }
}

export default class App extends React.Component {
  stop (){
    console.log('stop')
  }
  render() {
    return(
      <View style={styles.container}>
        <Timer style = {styles.timer} minutes={25} seconds = {0}/>
        <View style = {styles.buttonContainer}>
          <Button title = 'Pause' style = {styles.timerButton} color = 'white' onPress = {()=>{console.log("call the timer's pause method here")}}/>
          <Button title = 'Stop' style = {styles.timerButton} color = 'white' onPress = {()=>{console.log("call the timer's stop method here")}}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  buttonContainer: {
    flexDirection: 'row',
  },

  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 50,
    backgroundColor: '#EC3D40',
  },

  timer: {
    backgroundColor: '#EC3D40',
    paddingTop: 50,
  },

  timerCount: {
    fontSize: 48,
    color: 'white',
    backgroundColor: '#EC3D40',
    paddingTop: 10,
    paddingBottom: 10,
  },

  timerButton:{
    borderColor: 'white',
    backgroundColor: 'transparent',
  }
});

从“React”导入React
从“react native”导入{文本、视图、按钮、样式表}；
从“expo”导入{Constants}；
类计时器扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
分钟：道具，分钟，
秒：道具，秒，
计数：0，
}
}
十二月=（）=>{
this.setState（previousState=>{
如果（上一个状态。秒==0）{
返回{
分钟数：previousState.minutes-1，
秒：59，
计数：上一个状态。计数+1，
}
}
否则{
返回{
分钟数：previousState.minutes，
秒：previousState.seconds-1，
计数：上一个状态。计数+1，
}
}
});
}
组件安装（）{
设定间隔（本年12月，1000）；
}
渲染（）{
返回(
{this.state.minutes}
:
{this.state.seconds}
)
}
停止（）{
console.log（'stop'）
}
停顿（）{
console.log（'pause'）
}
}
导出默认类App扩展React.Component{
停止（）{
console.log（'stop'）
}
render（）{
返回(
{console.log（“在此处调用计时器的暂停方法”）}/>
{console.log（“在此处调用计时器的stop方法”）}/>
);
}
}
const styles=StyleSheet.create({
按钮容器：{
flexDirection:'行'，
},
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
paddingTop:50，
背景颜色：“#EC3D40”，
},
计时器：{
背景颜色：“#EC3D40”，
paddingTop:50，
},
时间计数：{
尺寸：48，
颜色：'白色'，
背景颜色：“#EC3D40”，
paddingTop:10，
填充底部：10，
},
时间按钮：{
边框颜色：“白色”，
背景色：“透明”，
}
});

实际上，您可以使用该功能来实现这一点

您可以创建一个

ref

，并将其分配给计时器组件。然后可以调用此组件的方法

export default class App extends React.Component {
  timerRef = React.createRef();

  render() {
    return(
      <View style={styles.container}>
        <Timer style = {styles.timer} minutes={25} seconds = {0} ref={this.timerRef}/>
        <View style = {styles.buttonContainer}>
          <Button title = 'Pause' style = {styles.timerButton} color = 'white' onPress = {()=>{console.log("call the timer's pause method here"); this.timerRef.current.pause();}}/>
          <Button title = 'Stop' style = {styles.timerButton} color = 'white' onPress = {()=>{console.log("call the timer's stop method here"); this.timerRef.current.stop();}}/>
        </View>
      </View>
    );
  }
}

导出默认类App扩展React.Component{
timerRef=React.createRef（）；
render（）{
返回(
{console.log（“在此处调用计时器的pause方法”）；this.timerRef.current.pause（）；}/>
{console.log（“在此处调用计时器的stop方法”）；this.timerRef.current.stop（）；}}/>
);
}
}

---

但这似乎不是一种反应式的做事方式。

你需要提升状态。可能您需要制作一个包含计时器、按钮和状态的组件