本地化 React 和 React-Native 组件，使它们尽可能可重用

Question

>最近我一直在尝试在我的 React 和 React-Native 应用程序中按照容器组件设计模式尽可能保持我的代码可重用。我通常尝试将所有组件都变成虚拟组件，让容器完成工作并使用 props 传递数据。

现在我正在尝试本地化这些组件，但我想让它们在以后的项目中可重用。到目前为止，我已经提出了解决方案：

1.- 将每个显示的字符串作为单独的道具传递到组件中。喜欢这个。

<MyAwesomeComponent 
...props
string1="String1"
string2="String2"
string3="String3"
/>

2.- 将翻译作为单个对象传递

<MyAwesomeComponent 
...props
translation={translation}
/>

我个人在第一个中找到了一个更好的解决方案，因为在组件中管理默认道具变得更加容易。

您认为哪一个是最好的方法，为什么？你找到更好的方法了吗？

Answer 1

如果对某人有用，我的最后一种方法：

我遵循了@LucasOliveira方法，但走得更远了一点，这就是我使用ex-react-native-i18n所做的，但您可以使用您觉得最舒服的任何插件：

• 首先，我在组件中声明了一个帮助程序方法，以返回具有完整翻译的单个对象

• 将翻译对象向下传递到"虚拟"组件

ContaninerComponent.js

class ContainerComponent extends React.Component {
...
// Load translation outside context.
loadTranslation() {
return {
string1: I18n.t('key1'),
string2: I18n.t('key2'),
string3: I18n.t('key3')
}
}
...
render() {
return(
<MyAwesomeComponent
...props
translation={this.loadTranslation()}
/>
);
}
}

然后，在虚拟组件中，我设置了一个默认翻译，以适应未设置翻译的情况，然后我创建了一个帮助程序方法来处理可能未处理的字符串并避免未定义的值：

我的真棒组件.js

const MyAwesomeComponent = ({ ..., translation }) => {
const strings = handleTranslation(translation);
return (
.... some JSX here ....
);
};
const DEFAULT_TRANSLATION = {
string1: 'Your Default String',
string2: 'Your Default String',
string3: 'Your Default String'
}
const handleTranslation = (translation) => {
if (translation === undefined) return DEFAULT_TRANSLATION;
return {
string1: (translation.string1 !== undefined) ?
translation.string1 : DEFAULT_TRANSLATION.string1;
string2: (translation.string2 !== undefined) ?
translation.string2 : DEFAULT_TRANSLATION.string2;
string3: (translation.string3 !== undefined) ?
translation.string3 : DEFAULT_TRANSLATION.string3;
}
};

现在，可以从"strings"变量中安全地使用整个翻译。

希望对您有所帮助！

Answer 2

我会选择第二种方法，因为能够在组件声明之外定义对象，使您的组件接受对象，字符串，日期等......允许您稍后处理。 这样做：

<MyAwesomeComponent 
...props
translation={translation}
/>

意味着我们的代码不需要知道它正在渲染，因为这将是你的组件责任