reactjs - ReactJS 组件中的恒定放置

Question

来自 Java 背景，在我看来，下面的常量应该在类中定义为实例变量。但是，这不起作用，如果我想从不同的函数访问变量，则必须在组件类之外定义该常量。有人可以向我解释一下这个推理吗？我只是错过了一些简单的事情吗？

我从 codeacademy.com 获取了此代码。

import React from 'react';
import ReactDOM from 'react-dom';

const redPanda = {
  src: 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg',
  alt: 'Red Panda',
  width: '200px',
};

class RedPanda extends React.Component {
  render() {
    return (
      <div>
        <h1>Cute Red Panda</h1>
        <img src={redPanda.src} alt={redPanda.alt} width={redPanda.width} />
      </div>
    );
  }
}

ReactDOM.render(<RedPanda />, document.getElementById('app'));

Answer 1

当您想要定义一些常量值(例如样式或图像 URL)时，最好在组件外部定义它们。它将成为全局值并在该文件的每个函数/类中可用。

定义常量的另一个选项是在类实例本身上，但该变量将仅在类内部可用。这意味着如果您在同一文件中定义了两个类，则一个类变量在另一个类中将不可用。

像这样:

class ABC extends React.Component{
   constructor(){
      super();
      this.a = 10;
      this.b = 20;
   }

   render(){
      console.log(this.a, this.b);
      return (....);
   }
}

注意: React 类不具备类级别属性的功能；我们只能定义方法。但如果你想定义值，那么你需要使用 class transform properties .