JSON 文件中的超链接值

Question

我有包含适当文本的翻译 json 文件。我想超 link 我句子中的一个词

json 存储所有值的文件

  "noDocuments": "No documents found, please contact HR Here"

这就是我在其中一个组件

中引用我的 json 文件的方式

return <Translation>
        {(t) => {
            if (this.state.loading) {
                return (
                    <div style={{display: 'flex', justifyContent: 'center'}}>
                        <Spin/>
                    </div>
                )
            }
            if (this.state.metaInfoDocs.length === 0) {
                return (
                    <div style={{display: 'flex', justifyContent: 'center'}}>
                        <NoDocumentsAlert>{t('noDocuments')}</NoDocumentsAlert>
                    </div>
                )
            }

我只是想知道是否可以在我的 json 文件中写入 htmt 以便我可以超 link 一个字，将不胜感激。

Answer 1

我在这里假设您使用的 {t()} 语法 react i18next

该软件包有一个 Trans 组件，可以让您拥有这样的东西：

<Trans i18nKey="noDocuments">No documents found, please contact HR Here: <a href="">Link</a></Trans>

这将在您的JSON中出现：

"noDocuments": "No documents found, please contact HR Here: <1>Link</1>"

Answer 2

你可以这样做

<div dangerouslySetInnerHTML={{ __html: jsonFile.noDocuments }}></div>

这个类似于JS中的innerHTML。有关详细信息，请参阅 dangerouslysetinnerhtml。

JSON 文件中的超链接值

Hyperlinking value in JSON file

json

translation

reactjs