Question

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

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照片网址。因此，photoUrl函数接受一个图像对象和大小文本对象，并调用sizeToLetterMap来为该大小文本提供字母。

功能：

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

我不认为将sizeToLetterMap作为函数进行正确的设计。我认为它更适合作为常数。如何在ReactJS中定义常量？

Answer 1

如果要将常量保留在React组件中，请使用statics属性，如下例所示。否则，请使用@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];
    }

Answer 2

除了简单的React和ES6之外，你不需要使用任何东西来达到你想要的效果。根据吉姆的回答，只需在正确的位置定义常数。我喜欢在外部不需要的情况下保持组件的常量局部的想法。以下是可能的用法示例。

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";

Answer 3

好吧，有很多方法可以像javascript一样在javascript中执行此操作。我认为没有办法做出反应。这就是我要做的事情：

在js文件中：

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

你的反应文件中的

：

'use strict';

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

你需要考虑的事情，希望这会有所帮助

Answer 4

警告：这是一项实验性功能，可能会在未来版本中发生显着变化甚至停止存在

您可以使用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

Answer 5

您也可以这样做，

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

现在使用

访问，那些常量（默认值）

@props.firstName

@props.lastName

希望这有帮助!!!。

Answer 6

您可以在单独的文件中创建常量，如下所示

export const param = Object.freeze({
  ELECTRICITY:      'Electricity',
  GAS_FUEL_THERMAL: 'GasFuelsAndThermals',
  WATER:            'Water',
  WASTE:            'Waste',
  CARBON:           'Carbon',
})

如何在ReactJS中定义常量

6 个答案: