반응에서 상수를 정의하는 방법JS

반응에서 상수를 정의하는 방법JS

텍스트를 문자에 매핑하는 기능이 있습니다.

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 함수는 이미지 객체와 크기 텍스트 객체를 가져와 크기를 호출합니다.ToLetterMap을 사용하여 해당 크기의 텍스트에 대한 문자를 작성합니다.

기능:

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

사이즈가 맞는 디자인은 아닌 것 같아요.함수로서의 ToLetterMap.상수로서 더 잘 맞는 것 같아요.ReactJ에서 상수를 정의하려면 어떻게 해야 합니까?

원하는 것을 달성하기 위해 플레인 리액트와 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";

반응 성분에 상수를 유지하려면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];
    }

javascript에는 다른 방법처럼 많은 방법이 있습니다.반응해서 할 수 있는 방법은 없는 것 같아요.제가 할 일은 다음과 같습니다.

js 파일:

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

리액트 파일:

'use strict';

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

당신이 고려해야 할 것, 이것이 도움이 되기를 바랍니다.

경고: 이 기능은 실험적인 기능으로 향후 출시에서 극적으로 변경되거나 더 이상 존재하지 않을 수 있습니다.

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

다음과 같이 별도의 파일에 상수를 생성할 수 있습니다.

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

할 수도 있어요.

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

이제 액세스, 상수(기본값) 사용

@props.firstName

@props.lastName

도움이 되길 바랍니다!!!

export const param = 개체입니다.freeze({전기: '전기', GAS_FUEL_THERMAL: '가스 연료 및열', 물: '물', 폐기물: '폐기물', 탄소: '탄소', })

언급URL : https://stackoverflow.com/questions/32291851/how-to-define-constants-in-reactjs