如何在ReactJS中定义常量

我有一个将文本映射为字母的函数：

sizeToLetterMap: function() { 
     return {
                small_square: 's',
                large_square: 'q',
                thumbnail: 't',
                small_240: 'm',
                small_320: 'n',
                medium_640: 'z',
                medium_800: 'c',
                large_1024: 'b',
                large_1600: 'h',
                large_2048: 'k',
                original: 'o'
            };
}

这些字母用于创建flickr照片URL。因此，photoUrl函数接收图像对象和大小文本对象，并调用sizeToLetterMap为该大小的文本生成字母

职能：

photoUrl(image, size_text): function () {
      var size = this.sizeToLetterMap(size_text);
}

---

我认为将sizeToLetterMap作为一个函数是不合适的设计。我认为它更适合作为一个常数。如何在ReactJS中定义常量？

好吧，在javascript中有很多方法可以做到这一点，就像其他人所说的那样。我不认为有一种方法可以在反应中做到这一点。下面是我要做的：

在js文件中：

module.exports = {
    small_square: 's',
    large_square: 'q'
}

在您的react文件中：

'use strict';

var Constant = require('constants');
....
var something = Constant.small_square;

---

<>你要考虑的事情，希望这有助于

< P>如果你想在反应成分中保持常量，请使用<代码>静力学属性，如下面的例子。否则，使用@Jim给出的答案

var MyComponent = React.createClass({
    statics: {
        sizeToLetterMap: {
            small_square: 's',
            large_square: 'q',
            thumbnail: 't',
            small_240: 'm',
            small_320: 'n',
            medium_640: 'z',
            medium_800: 'c',
            large_1024: 'b',
            large_1600: 'h',
            large_2048: 'k',
            original: 'o'
        },
        someOtherStatic: 100
    },

    photoUrl: function (image, size_text) {
        var size = MyComponent.sizeToLetterMap[size_text];
    }

你也可以

getDefaultProps: ->
  firstName: 'Rails'
  lastName: 'React'

现在访问，这些常量（默认值）使用

---

希望这有帮助

警告：这是一项实验性功能，可能会在未来的版本中发生巨大变化，甚至不再存在

您可以使用ES7静态：

npm install babel-preset-stage-0

然后将

“stage-0”

添加到.babelrc预设：

{
    "presets": ["es2015", "react", "stage-0"]
}

然后，你去

class Component extends React.Component {
    static foo = 'bar';
    static baz = {a: 1, b: 2}
}

然后你像这样使用它们：

Component.foo

---

您不需要使用任何东西，只需要使用简单的React和ES6即可实现您想要的。根据Jim的回答，只需在正确的位置定义常数。如果外部不需要，我喜欢保持组件的局部常量。下面是一个可能的用法示例

import React from "react";

const sizeToLetterMap = {
  small_square: 's',
  large_square: 'q',
  thumbnail: 't',
  small_240: 'm',
  small_320: 'n',
  medium_640: 'z',
  medium_800: 'c',
  large_1024: 'b',
  large_1600: 'h',
  large_2048: 'k',
  original: 'o'
};

class PhotoComponent extends React.Component {
  constructor(args) {
    super(args);
  }

  photoUrl(image, size_text) {
    return (<span>
      Image: {image}, Size Letter: {sizeToLetterMap[size_text]}
    </span>);
  }

  render() {
    return (
      <div className="photo-wrapper">
        The url is: {this.photoUrl(this.props.image, this.props.size_text)}
      </div>
    )
  }
}

export default PhotoComponent;

// Call this with <PhotoComponent image="abc.png" size_text="thumbnail" />
// Of course the component must first be imported where used, example:
// import PhotoComponent from "./photo_component.jsx";

从“React”导入React；
常数sizeToLetterMap={
小广场：“s”，
大广场：“q”，
缩略图：“t”，
小_240:'m'，
小_320：‘n’，
中号_640：‘z’，
中(800):"c",，
大型_1024：‘b’，
大型_1600：‘h’，
大号_2048:'k'，
原文：“o”
};
类PhotoComponent扩展了React.Component{
构造函数（args）{
超级（args）；
}
photoUrl（图像、大小和文本）{
返回(
图像：{Image}，大小字母：{sizeToLetterMap[Size\u text]}
);
}
render（）{
返回(
url是：{this.photoUrl（this.props.image，this.props.size_text）}
)
}
}
导出默认光电元件；
//叫这个
//当然，必须首先在使用的位置导入组件，例如：
//从“/photo_component.jsx”导入光组件；

React只是一个JavaScript库。React不包含JavaScript。特别是，当你深入到一些与UI代码无关的事情，比如如何声明常量时，你真的不应该问React如何让你这样做，而应该问如何在JavaScript中这样做。我问的可能重复，如何在reactjs中使用这些代码？与我在普通JavaScript中使用的方法相同。只是一个常规的旧语句<代码>变量sizeToLetterMap=使用stage-0功能是非常危险的，因为它们可能会发生巨大的变化，甚至不存在于语言的下一个版本中。嘿，这是非常重要的一点。我会把它添加到我的答案中。然而，像statics这样的简单构造可能会有什么变化呢？以当前的statics实现为例：

static get bar（）{return\u bar；}

和

static set bar（value）{u bar=value；}

在es6I中，我相信在这种情况下，您可以访问

static

属性，而不必实例化类。e、 g.

const staticFromClass=MyComponent.someOtherStatic/=>100

Perfect。我以类似的方式使用此解决方案来刷新组件<代码>构造函数（props）{super（props）；this.state=initialState}''reset（）{this.setState（initialState）}向上投票，因为这正是我要找的。。。我有类似这样的东西``从“../../util/constants”导入常量const constants=constants>```

import React from "react";

const sizeToLetterMap = {
  small_square: 's',
  large_square: 'q',
  thumbnail: 't',
  small_240: 'm',
  small_320: 'n',
  medium_640: 'z',
  medium_800: 'c',
  large_1024: 'b',
  large_1600: 'h',
  large_2048: 'k',
  original: 'o'
};

class PhotoComponent extends React.Component {
  constructor(args) {
    super(args);
  }

  photoUrl(image, size_text) {
    return (<span>
      Image: {image}, Size Letter: {sizeToLetterMap[size_text]}
    </span>);
  }

  render() {
    return (
      <div className="photo-wrapper">
        The url is: {this.photoUrl(this.props.image, this.props.size_text)}
      </div>
    )
  }
}

export default PhotoComponent;

// Call this with <PhotoComponent image="abc.png" size_text="thumbnail" />
// Of course the component must first be imported where used, example:
// import PhotoComponent from "./photo_component.jsx";