Question

在React和React Native中，如何在我的strings.js文件中包含jsx组件？

我创建了一个strings.js文件来存储我的应用使用的所有复制文本。这对于常规文本很好用。但是，如果文本本身包含其他React组件，则将成为问题。

示例：

const strings = {
    welcomeScreen: {
        screenTitle: 'Welcome',
        heading: '<TextBold>Thank you</TextBold> for installing our app!',
        paragraph: 'Lorem, ipsum dolor sit<LineBreakSmall/>consectetur adipisicing.',
    },
};

export default strings;

screenTitle有效，heading和paragraph不起作用。我需要更改什么？

PS：我知道JS数组符号，但是想知道是否还有另一种方法？特别是，使用这种表示法，我需要导入例如我的strings.js文件中的TextBold和LineBreakSmall。

Answer 1

您可以尝试react-jsx-parser。

React-html-parser或dragonallySetInnerHTML仅适用于标准html标签，不适用于JSX。

Answer 2

如果要在网页上将标题和参数字符串显示为html，则可以重新安装nacc库，将其字符串转换为html。

示例：

import React from 'react';
import ReactHtmlParser from 'react-html-parser';

class HtmlComponent extends React.Component {
    render() {
        return (
            <>
                <div>
                    {ReactHtmlParser(string.welcomeScreen.heading)}
                </div>
                <div>
                    {ReactHtmlParser(string.welcomeScreen.paragraph)}
                </div>
            </>
        )
    }
}

在字符串文件中包含jsx组件

2 个答案: