Как определить константы в ReactJS

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 фото URLs. Таким образом, функция photoUrl принимает объект изображения и текстовый объект размера и вызывает sizeToLetterMap, чтобы придумать букву для текста такого размера.

Функция:

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

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

Answer 1

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

в JS файл:

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

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

'use strict'; 

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

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

Answer 2

Если вы хотите чтобы сохранить константы в компоненте 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 3

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

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

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

@props.firstName 

@props.lastName 

Надежда эта помощь !! !.

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

Вам не нужно использовать что-нибудь, но обычный 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";