使用来自 json 文件的字符串将字符串数组传递给 React 组件,并允许内联 span 标签

2024-01-05

我正在尝试获取一个字符串数组来显示为段落,并允许在这些字符串内使用内联跨度标签。

我的问题是,当在段落内添加值时,会将“”标记的开头和结尾解码为其解码值“”

有没有一种简单的方法可以使其工作而无需为此情况制作特定组件?

我的React组件如下

const Paragraphs = ({ data, languageText }) => {
    if (data) {
        const texts = languageText[data.languageKey];

        return (
            <section>
                {texts && texts.map(text => <p>{text}</p>)}
            </section>
        );
    } else {
        console.warn(`webpage::element: 'PARAGRAPHS' lack content`);
    }
}
export default Paragraphs;

这是传递给文本的数组

[
"When a Relic is found or assembled from Relic Fragments, a payout is rewarded, based on its rarity. <span style=\"font-weight: bold\">The rarer the item, the higher the payout!</span>",
"In addition to Relics, Gold Coins can also be found."
],

默认情况下,React 转义 HTML 以防止 XSS 只需使用dangerouslySetInnerHTML, 看一眼官方文档 https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用来自 json 文件的字符串将字符串数组传递给 React 组件,并允许内联 span 标签 的相关文章

随机推荐

  • 使用不带动画功能的 matplotlib 进行动画处理

    有没有一种方法可以在 matplotlib 中对图形进行动画处理 而无需借助内置的动画函数 我发现它们使用起来非常尴尬 并且觉得只绘制一个点 擦除图表 然后绘制下一个点会简单得多 我设想的是这样的事情 def f do stuff here
  • r Markdown 的 Yaml 标头中的单引号和双引号有什么区别?

    我在 RStudio 中使用 knit 编译的 r Markdown 文件中遇到错误 我不太确定这个 错误 应该指向哪里 这似乎并不是一个 R 错误 如果我使用以下 YAML 标头内容创建 R markdown 文档 我可以很好地编织该文件
  • winsock中的异步地址解析?

    查看winsock中的异步地址解析 似乎唯一的两个选择是使用阻塞gethostbyname在单独的线程上 或使用WSAAsyncGetHostByName 出于某种原因 后者被设计为处理窗口消息 而不是重叠操作和完成端口 例程 有没有什么版
  • Python Mechanize 选择表单 FormNotFoundError

    我想选择带有机械化的形式 这是我的代码 br mechanize Browser self br open url br select form name login form 表格的代码
  • 在 C++ 中不打开文件检查文件大小?

    我正在尝试获取大文件 12gb 的文件大小 但我不想打开该文件来执行此操作 因为我认为这会消耗大量资源 有没有什么好的API可以做到这一点 我是在Windows环境下 你应该打电话GetFileSizeEx http msdn micros
  • 如何使用numpy生成分段间隔上的随机数

    我正在 python 中使用 numpy 模块来生成随机数 当我需要生成连续区间的随机数如 a b 时 我会使用 b a np random rand 1 a 但现在我需要生成区间 a b 和 c d 内的均匀随机数 我该怎么办 我想生成一
  • ConnectNamedPipe 和 asio 重叠的 ptr

    我将管道服务器命名为使用 boost asio 编写的 服务器创建命名管道并调用 ConnectNamedPipe 将 asio 重叠 ptr 传递给它 问题是传递给 asiooverlaped 的完成处理程序永远不会被调用 即在客户端调用
  • 如何在android studio中启用版本控制窗口

    对于我的某些分支 我无法获得版本控制窗口 例如 如果我进入分支develop 然后窗口显示 如果我进入master它已经消失了 我无能为力把它找回来 我试图通过从开发到掌握来欺骗它 但一旦我掌握了 它又消失了 该问题相对较新 7 天 过去不
  • 为什么 Scala 案例类字段不反映为公共字段?

    我一直将案例类的构造函数参数理解为定义公共值 但是 当我反映这些字段时 isPublic 方法出现错误 有什么想法吗 scala gt class Test val name String val num Int defined class
  • 自定义 Ansible 回调未接收 group_vars/host_vars

    我正在编写一个自定义的 ansible 回调 class CallbackModule CallbackBase CALLBACK VERSION 2 0 CALLBACK TYPE aggregate CALLBACK NAME my c
  • 如何在mayavi(imshow)中绘制彩色图像

    是否可以使用mayavi绘制具有3个颜色通道的图像 根据 mayavi 的文档 mayavi mlab imshow只能处理形状为 n x m 的图像 Method 我必须使用 Mayavi 的自定义色彩图 请参阅http docs ent
  • 用于网站和 Api 的 Ninject - 序列不包含元素

    我有一个带有 Web Api 项目和 MVC 3 项目的 VS2010 解决方案 Web APi 和 MVC 项目都有自己的 App Start 和 NinjectWebCommon 并在其中声明了自己的绑定 当尝试使用 Api 时 我总是
  • PHP 中的 OOP:来自变量的类函数?

    是否可以像这样从类中调用函数 class new class function name do the thing req class gt function name 类似的解决方案 这似乎不起作用 是的 这是可能的 这就是众所周知的变量
  • 在单个 ASP.NET Core WebAPI 服务中托管多个产品 API

    我正在设计一个基于 ASP NET Core 的 Web API 它需要支持我的产品的多个变体 比方说基于许可证或安装的品种 我没有为每种类型的产品提供多种服务 而是考虑使用一个服务来容纳 托管多个端点或 URL 我将在安装时在 appse
  • 如何在c中读取图像的像素?

    假设我们的位图图像具有高度 M 和宽度 N 我们总是假设 在本实验中 宽度 N 是 4 的倍数 这简化了 文件中的字节布局 对于该图像 像素数组存储 正好 3 x N x M 字节 如下所示 每组 3 个字节代表一个像素 其中字节存储 按顺
  • 如何在 main 中设置 Nimbus 外观

    我刚刚学习Java 仍然无法解决我遇到的这个小问题 我的弹出日历使用 Nimbus 外观和感觉 但我有使用 Java 外观和感觉的面板和容器 Jtable 我试图使每个 GUI 屏幕 窗口都使用 Nimbus 外观和感觉 Merky 建议将
  • 从 numpy 数组到 DICOM

    我的代码读取 DICOM 文件 将像素信息放入 numpy 数组 然后修改 numpy 数组 它使用列表是因为我试图同时操作多个 DICOM 文件 我还没有找到任何关于如何获取修改后的 numpy 数组并再次使其成为 DICOM 文件的信息
  • 通过 Windows API 检索 PCI 坐标(用户模式)

    有没有办法使用 Windows c c API 例如 PnP Configuration Manager API 获取设备的 PCI 坐标 总线 插槽 功能号 我已经知道如何在内核模式下执行此操作 我需要一个用户模式解决方案 我的目标系统是
  • 在“for”循环中递增 1 时格式化背后的技术原因?

    整个网络上都有代码示例for循环看起来像这样 for int i 0 i lt 5 i 当我使用以下格式时 for int i 0 i 5 i 我这样做是因为我相信这样会更有效率 但是在大多数情况下这真的很重要吗 每个人都喜欢他们的微观优化
  • 使用来自 json 文件的字符串将字符串数组传递给 React 组件,并允许内联 span 标签

    我正在尝试获取一个字符串数组来显示为段落 并允许在这些字符串内使用内联跨度标签 我的问题是 当在段落内添加值时 会将 标记的开头和结尾解码为其解码值 有没有一种简单的方法可以使其工作而无需为此情况制作特定组件 我的React组件如下 con