-
Notifications
You must be signed in to change notification settings - Fork 31
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
translate returns an object instead of a string #1
Comments
You are using it wrong. React-Translate-Component's var Translate = require('react-translate-component');
// in render function
return React.DOM.li(null, Translate(null, 'my.translation.key')); you can do it a bit shorter this way var t = require('react-translate-component').translate;
// in render function
return React.DOM.li(null, t('my.translation.key')); If you need a translated string to be returned, use Counterpart's method. Counterpart is a peer dependency of React-Translate-Component und used internally in its render function. var _t = require('counterpart');
_t('my.translation.keys') // => 'a string' |
You could listen to Counterpart's locale change event in your component's var MyComponent = React.createClass({
/* ... */
componentDidMount: function() {
counterpart.onLocaleChange(this.localeChanged);
},
componentWillUnmount: function() {
counterpart.offLocaleChange(this.localeChanged);
},
localeChanged: function(newLocale) {
this.setState({
placeholder: counterpart.translate('foo.email.placeholder')
});
},
render: function () {
var i18n_placeholder = this.state.placeholder;
return (
<div>
<input type="email" placeholder={i18n_placeholder} />
</div>
);
},
}); |
Thank you @martinandert that worked great |
Thanks for the tip! Might be useful to put that somewhere in the README (FAQ or so), as it is a quite common use case. In my case, I built on top of your tip to have |
when used outside the return statement of the React class render function, the react-translate-component's translate function returns an object where a string should be returned.
code snippet within a React.creatClass:
render:function() {
var menusLns = this.getFooterMenu(); //getting a json file that describes my menus
var i, j;
var menus = [];
var content;
// this._e comes from a mixin lib in which we have _e: require('react-translate-component').translate,
// this syntax works nicely in another react component, but within its return statement
console.log("item text = " + text); // KO: object Object
var link = menusLns[i].menuitem[j].link;
var item = '\u003cli\u003e\u003ca title="' + tagTitle + '" href="' + link + '"\u003e' + text + '\u003c/a\u003e\u003c/li\u003e\n';
console.log("menu item: " + item);
Menu.items += item;
}
menus.push(Menu);
}
The text was updated successfully, but these errors were encountered: