Question

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

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

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

如果它对某人有用，我的最终方法是：

我遵循了@LucasOliveira的方法，但是进一步了解这是我使用 ex-react-native-i18n 所做的，但你可以使用你觉得最舒服的插件：

首先，我在我的组件中声明了一个帮助器方法，以返回带有完整翻译的单个对象
将翻译对象传递给＆＃34; Dummy＆＃34;成分

<强> 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()}
      />
    );
  }
}

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

<强> MyAwesomeComponent.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;
  }
};

现在整个翻译可以安全地使用＆＃34;字符串＆＃34;变量

希望它有所帮助！

本地化反应＆amp; React-Native组件使它们尽可能重用

2 个答案: