如何在ReactJS中定义常量


How to define constants in ReactJS

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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为该大小的文本生成字母。

功能：

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

号

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

相关讨论

如果要在react组件中保留常量，请使用statics属性，如下例所示。否则，使用@jim给出的答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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];
    }
相关讨论

你不需要使用任何东西，除了简单的反应和ES6来实现你想要的。根据吉姆的回答，在正确的地方定义常数。如果不需要外部的话，我喜欢将常量保持在组件的局部。以下是可能使用的示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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 (
     
        The url is: {this.photoUrl(this.props.image, this.props.size_text)}
     
    )
  }
}

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";
相关讨论

好吧，在JavaScript中有很多方法可以做到这一点，就像其他人说的那样。我认为没有办法做出反应。我要做的是：

在JS文件中：

1
2
3
4
module.exports = {
    small_square: 's',
    large_square: 'q'
}

在您的反应文件中：

1
2
3
4
5
'use strict';

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

号

你可以考虑一下，希望这有帮助

警告：这是一个实验性的特性，可能会在将来的版本中发生巨大的变化，甚至停止存在。

您可以使用ES7静态：

1
npm install babel-preset-stage-0

。

然后将"stage-0"添加到.babelrc预设：

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

。

之后，你就去

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

然后像这样使用它们：

1
Component.foo

。

相关讨论

你也可以这样做，

1
2
3
getDefaultProps: ->
  firstName: 'Rails'
  lastName: 'React'

。

现在访问，这些常量(默认值)使用

1
2
3
@props.firstName

@props.lastName

希望能帮上忙！！！！.