如何在react.js中声明变量？

Question

我正在尝试将我的javascript代码集成到现有react.js项目的源代码中。

ESLint似乎不允许var声明，我不明白为什么。

var distortion = new Tone.Distortion({
  distortion  : 0.6 ,
  oversample  : "3x" 
});

Answer 1

如果你使用react类作为组件，你不能在里面使用变量，因为类是对象，但你可以给它分配属性：

class rComponent extends React.Component {
  distortion = new Tone.Distortion({
    distortion  : 0.6 ,
    oversample  : "3x" 
  });
  render() {
   //....
  }
}

Answer 2

React中的特定条件中不允许变量定义。

您不能在类组件中定义它们。但是，您可以在React钩子(方法)中定义变量，但在return语句之前定义。

另外，我建议您将变量定义与const或let一起使用，而不是var。

class SomeComponent extends Component {
 const someVar = '' // invalid
 render() {
   const someVar = '' // valid
 }
}

someComponent = () => {
  const someVar = '' // valid
  return <OtherComponent someValue={someVar} />
}

如果你有基于类的组件，那么你可以在类的外部定义变量(在类定义之前)。

const someVar = ''
class SomeComponent extends Component {
  render() {
   // use someVar in a hook
  }
}

但这引发了一个问题，为什么不使用状态来代替呢？