Question

我有以下代码：

const ContactInfo = ({ language }) => {
  const engl = {
    yes: 'yes',
  };
  const fren = {
    yes: 'oui',
  };
  let text = null;
  if (language === 'engl') {
      text = <Text> {engl.ads} </Text>;
    } else {
      text = <Text> {fren.ads} </Text>;
    }

  return (
      {text}
      )
}

'语言'道具可以是'engl'或'fren'。这很好，但是，我想要做的是这样的事情：

return (
  <Text> {{language}.ads}
  )

所以不要再使用if条件，我想渲染任何语言等于和访问我的预定义对象。

我的目标是减少代码行。这可能吗？

此外，还有其他强大的方法来处理多语言应用程序（除服务器端之外）吗？

Answer 1

您可以将2个（或更多）对象包装在一个将充当查找表的对象中，然后访问相关的密钥。

这是一个小例子：

const titles = {
  engl: {
    yes: 'yes'
  },
  fren: {
    yes: 'oui'
  }
}


const App = ({ language }) => (
  <div>
    {titles[language].yes}
  </div>
);

ReactDOM.render(<App language="fren" />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

顺便说一下，雅虎react-intl有一个很棒的项目可以帮助管理这个以及更多：

国际化React应用。该库提供了React组件以及用于格式化日期，数字和字符串的API，包括多元化和处理翻译。

基于语言的条件渲染：组合道具和常量来渲染组件

1 个答案: