国际化配置方案

问题

在文案配置的时候有以下场景

1. 需要国际化
2. 文案中参杂着链接和文字，并且相对位置可能改变

假设场景为

function App() {
  return (
    <div>
      <button>Hi</button>
      <div>
        我是产品想配置的文案，<a href="https://www.google.com.hk/">https://www.google.com.hk</a>
        中间可能夹杂链接，并且位置不知道在哪
      </div>
    </div>
  )
}

export default App

方案

import Markdown from "markdown-to-jsx"

function App() {
  return (
    <div>
      <button>Hi</button>
      <div>
        我是产品想配置的文案，<a href="https://www.google.com.hk/">https://www.google.com.hk</a>
        中间可能夹杂链接，并且位置不知道在哪
      </div>

      <hr />
      <h2>markdown-to-jsx 方案</h2>
      <Markdown>
        我是产品想配置的文案，[https://www.google.com.hk/](https://www.google.com.hk/)
        中间可能夹杂链接，并且位置不知道在哪
      </Markdown>
    </div>
  )
}

export default App

效果图

其他

这个问题本质上是想用字符串来描述一些动态行为，这里是利用了 Markdown 语法作为协议，若有更多样的诉求，可以再进一步制定协议内容，对能力进行支持。

整体目标是做到只改文案配置，不动代码 ~

仓库可见 https://github.com/sedationh/demo-i18n-text