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）时，最好在组件外部定义它，它将成为全局值，并且可以在该文件的每个函数/类中使用。

定义常量的另一个选择是在类实例本身上，但是那个变量只能在类中使用，这意味着如果你在同一个文件中定义了两个类，那么一个类变量将不会在另一个类中可用。

像这样：

<meta>

注意： 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，并在其他组件和文件中导入。

ReactJS组件中的常量放置

3 个答案: