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

Posted 2023-02-23

【中文标题】本地化 React 和 React-Native 组件，使其尽可能可重用

【英文标题】：Localize React & React-Native components keeping them as reusable as possible

【发布时间】：2018-01-08 13:59:50

【问题描述】：

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

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

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

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

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

<MyAwesomeComponent 
   ...props
   translation=translation
/>

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

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

【参考方案1】：

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

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

首先我在我的组件中声明了一个辅助方法来返回一个带有完整翻译的对象

将翻译对象向下传递给“虚拟”组件

容器组件.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;
  
;

现在整个翻译可以安全地从“字符串”变量中使用。

希望对您有所帮助！

【参考方案2】：

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

<MyAwesomeComponent 
   ...props
   translation=translation
/>

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