Reactjs 强制在方法中重复变量

每次我定义处理程序方法时，我都会被迫重复变量，即使两个方法共享相同的变量。例如：

handleBreak（evt）{
const id=evt.target.id；
让breakVar=this.state.breakSession；
让isPaused=this.state.isPaused；
让breakstart=this.state.breakstart；
}
手持会话（evt）{
const id=evt.target.id；
让sessionVar=this.state.session；
让isPaused=this.state.isPaused；
让intervalstart=this.state.intervalstart；
让breakBegins=document.getElementById（'timer-label'）；
让breakstart=this.state.breakstart；
}

除了创建包含这些相同变量的函数并将返回传递给处理程序之外，还有更干净的方法吗？

您可以使用并执行以下操作

const { session, isPaused, intervalBegan, breakBegan } = this.state;

---

在每个方法中从

props

和

state

访问变量是在React中处理变量的理想方法。它使组件测试变得友好

除非您是从事件侦听器传递事件，否则不建议在类方法之间传递变量

也就是说，您可以从

状态

和

道具

以更简洁的方式写入和访问变量，而无需使用

操作符

解构赋值 此代码

handleBreak(evt) {
  const id= evt.target.id;
  let breakVar= this.state.breakSession;
  let isPaused= this.state.isPaused;
  let breakBegan= this.state.breakBegan;
}

handleSession(evt) {
  const id= evt.target.id; 
  let sessionVar= this.state.session;
  let isPaused=this.state.isPaused;
  let intervalBegan=this.state.intervalBegan;
  let breakBegins=document.getElementById("timer-label");
  let breakBegan= this.state.breakBegan;
}

可以写成

handleBreak(evt) {
  const { target: { id } = {} } = evt;
  let { breakVar, isPaused, breakBegan } = state;
}

handleSession(evt) {
  const { target: { id } = {} } = evt;
  let { sessionVar, isPaused, intervalBegan, breakBegan } = this.state;      
  let breakBegins=document.getElementById("timer-label");
}

---

更多关于解构任务的信息，请点击此处-

感谢您的回复。这些方法并不是真正地互相传递变量，而是从状态访问变量来设置条件。“如果这不是正确的方式，那会是怎样的呢？”赫尔纳里尔说，“你所做的是正确的。”。我只是把这张便条作为以后访问此帖子的人的一般指南。我见过人们在一个地方分解所有变量，并在类方法之间传递它们。这只是一个一般性说明，并没有具体说明您的方法。这就是为什么我把它斜体化了。