在尝试了很多解决方案之后，我认为我找到了一个很好的解决方案，并且应该是React 0.14的惯用解决方案（即，它不使用mixins，而是使用高阶组件）（编辑 ：当然，在React 15中也很好！ ）。
根据约定，您的组件唯一需要的是strings道具。它应该是一个包含Component所需的各种字符串的对象，但实际上它的形状取决于您。
它确实包含默认翻译，因此您可以在其他地方使用该组件而无需提供任何翻译（它可以使用默认语言（本例中为英语）开箱即用。
import { default as React, PropTypes } from 'react';
import translate from './translate';
class MyComponent extends React.Component {
render() {
return (
<div>
{ this.props.strings.someTranslatedText }
</div>
);
}
}
MyComponent.propTypes = {
strings: PropTypes.object
};
MyComponent.defaultProps = {
strings: {
someTranslatedText: 'Hello World'
}
};
export default translate('MyComponent')(MyComponent);
在上一个片段中，您可能已经在最后一行注意到了这一点： translate('MyComponent')(MyComponent)
translate 在这种情况下，是一个高阶组件，它包装了您的组件，并提供了一些额外的功能（此构造替代了React早期版本的mixins）。
第一个参数是一个密钥，将用于在翻译文件中查找翻译（我在这里使用了组件的名称，但是可以是任何东西）。第二个（注意，该函数已进行咖喱化，以允许使用ES7装饰器）是组件本身的包装。
这是翻译组件的代码：
import { default as React } from 'react';
import en from '../i18n/en';
import fr from '../i18n/fr';
const languages = {
en,
fr
};
export default function translate(key) {
return Component => {
class TranslationComponent extends React.Component {
render() {
console.log('current language: ', this.context.currentLanguage);
var strings = languages[this.context.currentLanguage][key];
return <Component {...this.props} {...this.state} strings={strings} />;
}
}
TranslationComponent.contextTypes = {
currentLanguage: React.PropTypes.string
};
return TranslationComponent;
};
}
这不是魔术：它只会从上下文中读取当前语言（并且该上下文不会在整个代码库中泛滥，只是在此包装器中使用），然后从加载的文件中获取相关的字符串对象。在此示例中，此逻辑很幼稚，可以按照您真正想要的方式完成。
重要的一点是，在提供了键的情况下，它将上下文中的当前语言转换为字符串。
在根组件上，您只需要从当前状态设置当前语言即可。以下示例将Redux用作类似Flux的实现，但是可以使用任何其他框架/模式/库轻松进行转换。
import { default as React, PropTypes } from 'react';
import Menu from '../components/Menu';
import { connect } from 'react-redux';
import { changeLanguage } from '../state/lang';
class App extends React.Component {
render() {
return (
<div>
<Menu onLanguageChange={this.props.changeLanguage}/>
<div className="">
{this.props.children}
</div>
</div>
);
}
getChildContext() {
return {
currentLanguage: this.props.currentLanguage
};
}
}
App.propTypes = {
children: PropTypes.object.isrequired,
};
App.childContextTypes = {
currentLanguage: PropTypes.string.isrequired
};
function select(state){
return {user: state.auth.user, currentLanguage: state.lang.current};
}
function mapDispatchToProps(dispatch){
return {
changeLanguage: (lang) => dispatch(changeLanguage(lang))
};
}
export default connect(select, mapDispatchToProps)(App);
最后，翻译文件：
// en.js
export default {
MyComponent: {
someTranslatedText: 'Hello World'
},
SomeOtherComponent: {
foo: 'bar'
}
};
// fr.js
export default {
MyComponent: {
someTranslatedText: 'Salut le monde'
},
SomeOtherComponent: {
foo: 'bar mais en français'
}
};
你们有什么感想？
我认为这可以解决我试图避免的所有问题：转换逻辑不会在源代码中流血，它是非常隔离的，并且允许在没有它的情况下重用组件。
例如，MyComponent不需要被translate（）包裹，可以将其分隔开，从而允许其他希望strings按自己的意愿提供的人重用。
[Edit：31/03/2016]：我最近在一个Reactspective Board（用于敏捷回顾）上工作，它是由React＆Redux构建的，并且是多语言的。由于很多人在评论中要求提供真实的示例，因此它是：
602392714
清零编程群