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

【问题标题】：Include jsx components in strings file在字符串文件中包含 jsx 组件
【发布时间】：2019-06-05 06:32:57
【问题描述】：

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

我创建了一个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。

【问题讨论】：

你不需要将 React 组件作为字符串。因为它们不是字符串。组件表示法是一个 jsx 结构，如果您希望将其转换为 react.createElement 调用，它必须位于 jsx/js 文件中。除了将您的字符串分解为子字符串之外没有其他选择，其中没有 React 组件

标签： javascript reactjs react-native

【解决方案1】：

你可以试试react-jsx-parser。

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

【讨论】：

【解决方案2】：

如果你想在你的网页上将标题和参数字符串显示为 html，那么你可以使用 reacct-html-parser npm 库，它将你的字符串转换为 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>
            </>
        )
    }
}

【讨论】：