elenakretova
New Pleskian
I recently started to give a go to React js and im starting to like it.
There is one logic what i am stuck with.
My site is multi-language and i have problems rendering the strings.
So what i thought is to place a data-translate attribute to the id's or classes but still does not fit right.
This is just a basic example of my logic
React js
var counter = document.getElementById('counter').getAttribute('data-translate');
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div className={this.translate}>{counter} {this.state.secondsElapsed}</div>
);
}
});
React.renderComponent(
<Timer />,
document.getElementById('counter')
);
HTML
<div id="counter" data-translate="{{ trans('stream.counter') }}"></div>
So not the best idea.
Could someone give me a hint?
There is one logic what i am stuck with.
My site is multi-language and i have problems rendering the strings.
So what i thought is to place a data-translate attribute to the id's or classes but still does not fit right.
This is just a basic example of my logic
React js
var counter = document.getElementById('counter').getAttribute('data-translate');
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div className={this.translate}>{counter} {this.state.secondsElapsed}</div>
);
}
});
React.renderComponent(
<Timer />,
document.getElementById('counter')
);
HTML
<div id="counter" data-translate="{{ trans('stream.counter') }}"></div>
So not the best idea.
Could someone give me a hint?