ReactJS组件中的常量放置

Question

来自Java背景，在我看来，下面的常量应该在类中定义为实例变量。但是，这不起作用，如果我想从不同的函数访问一个变量，那么这个常量必须在component类之外定义。有没有人能给我解释一下这个道理？我是不是错过了一些简单的东西？

我从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。

Answer 2

为共享常量变量/对象创建一个constants.js，并从那里导出它以获得更好的可维护性。

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

import React from 'react';
import ReactDOM from 'react-dom';
import { redPanda } from 'path/to/your/constants/file'; //import from your constants.js

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 3

您可以使用类似以下内容：

在另一个类(例如，App.js)中使用以下代码：

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

在您的RedPanda组件中，使用以下内容：

import {redPanda} from './App';

最好的方法是在一个文件中定义所有的全局常量，并将其命名为类似common.js或global.js的名称，然后从该文件导入其他组件和文件。