Как определить константы в 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'
            };
}

эти буквы используются для создания URL-адресов flickr. Таким образом, функция photoUrl принимает объект изображения и текстовый объект размера и вызывает sizeToLetterMap, чтобы придумать букву для текста такого размера.

Функция:

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

Я не думаю, что его надлежащий дизайн имеет sizeToLetterMap как функцию. Я думаю, что он лучше подходит как постоянный. Как определить константы в ReactJS?

Ответы

Ответ 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];
    }

Ответ 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";

Ответ 3

Ну, есть много способов сделать это в javascript, как и другие. Я не думаю, что есть способ сделать это в реакции. вот что я буду делать:

в файле js:

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

в вашем файле реакции:

'use strict';

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

что-то для вас рассмотреть, надеюсь, что это поможет

Ответ 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

Ответ 5

Вы также можете сделать,

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

теперь доступ, те константы (значение по умолчанию), используя

@props.firstName

@props.lastName

Надеюсь, что эта помощь!!!.