Question

我有一个REACTSjs应用程序，正在尝试解决本地化问题。

我从API接收了一些文本，其中有一些特殊字符标记应本地化的文本。像这样：

This is a translated text: [labels.example]. Awesome!

我正在使用react-redux-localize来翻译密钥，因此结果应如下所示：

This is a translated text: <Translate id="labels.example" />. Awesome!

我尝试使用renderHTML中的react-render-html解决此问题：

function localizeNames(text) {
    text = text.replace("[", "<Translate id=\"");
    text = text.replace("]", "\" />");
    return text;
}

，然后在我的render函数中调用此函数：

<div>{renderHTML(localizeNames(text))}</div>

但是会引发异常：

Warning: The tag <translate> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

有人可以帮助我解决这个用例吗？我对javascript很陌生。

Answer 1

function localizeNames(text) {
    text = text.replace("[", "<Translate id=\"").replace("]", "\" />")
     return String(text)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

Answer 2

我假设renderHTML包中的react-render-html不会实例化文本字符串中的React组件，因此将<Translate>标记转换为无效的HTML元素，而该元素又会被检测到无法识别的React框架。

您需要滚动自己的函数，以将API的响应转换为React组件。以下函数使用正则表达式来查找API的语言标签，并将输入文本拆分为一系列React兼容的文本片段和<Translate>组件实例

// This is just to make this code snippet work
const Translate = () => 1;

function toReactTranslate(text) {
  let langTagRegex = /\[([\w\.]+)\]/g
  let result = [];
  let nextStart = 0;
  let tagMatch;
  
  do {
    tagMatch = langTagRegex.exec(text);

    if (tagMatch) {
      let id = tagMatch[1];
      let before = text.substring(nextStart, tagMatch.index);
      
      if (before) {
      	result.push(before);
      }
      
      // Add React Translate component to result
      result.push(<Translate id={id}/>);
      nextStart = tagMatch.index + tagMatch[0].length;
    }
  } while(tagMatch);
	
  if (nextStart) {
    let after = text.substr(nextStart);
    
    if (after) {
    	result.push(after);
    }
  }

  return result.length ? result : text;
}

let text = "This is a translated text: [labels.example]. Awesome!";
document.write(JSON.stringify(toReactTranslate(text)));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

用react元素替换占位符

2 个答案: