Question

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

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

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

Answer 1

您可以使用ES6 Destructuring做类似的事情

componentDidMount() {
  window.addEventListener("scroll", this.handeleScroll());
}

Answer 2

在每种方法中访问props和state中的变量是在React中使用变量的理想方式。它使组件易于测试。

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

话虽如此，您无需使用state运算符，就可以更简洁的方式从props和.写访问变量。

解构分配

此代码

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

有关解构分配的更多信息，这里-Destructuring Assignment MDN Docs

强制重复方法中的变量

2 个答案:

解构分配