How to define constants in ReactJS

前端 未结 5 2166
无人共我
无人共我 2021-02-03 18:42

I have a function that maps text to letters:

sizeToLetterMap: function() { 
     return {
                small_square: \'s\',
                large_square: \'q\         


        
相关标签:
5条回答
  • 2021-02-03 18:54

    If you want to keep the constants in the React component, use statics property, like the example below. Otherwise, use the answer given by @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];
        }
    
    0 讨论(0)
  • 2021-02-03 18:55

    You can also do,

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

    now access, those constant (default value) using

    @props.firstName
    
    @props.lastName
    

    Hope this help!!!.

    0 讨论(0)
  • 2021-02-03 19:03

    well, there are many ways to do this in javascript just like other says. I don't think there's a way to do it in react. here's what I would do:

    in a js file:

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

    in your react file:

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

    something for you to consider, hope this helps

    0 讨论(0)
  • 2021-02-03 19:03

    Warning: this is an experimental feature that could dramatically change or even cease to exist in future releases

    You can use ES7 statics:

    npm install babel-preset-stage-0
    

    And then add "stage-0" to .babelrc presets:

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

    Afterwards, you go

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

    And then you use them like this:

    Component.foo
    
    0 讨论(0)
  • 2021-02-03 19:10

    You don't need to use anything but plain React and ES6 to achieve what you want. As per Jim's answer, just define the constant in the right place. I like the idea of keeping the constant local to the component if not needed externally. The below is an example of possible usage.

    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";
    
    0 讨论(0)
提交回复
热议问题