I have a function that maps text to letters:
sizeToLetterMap: function() {
return {
small_square: \'s\',
large_square: \'q\
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];
}
You can also do,
getDefaultProps: ->
firstName: 'Rails'
lastName: 'React'
now access, those constant (default value) using
@props.firstName
@props.lastName
Hope this help!!!.
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
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
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";