next.js 在React中正确渲染标记字符串

exdqitrt 于 2023-04-20 发布在 React

关注(0)|答案(1)|浏览(135)

我有一个很小的问题，但现在有点阻塞。我正在使用Hygraph CMS与React/Next JS前端，大多数情况下，如dangerouslySetInnerHTML或import parse from 'html-react-parser'应该渲染良好，但不是现在。
问题是任何一种编辑文本样式的html标签都不起作用。像，，em和u。
我尝试的两个例子都是不带风格地渲染文本。
例如，这个字符串Error in system呈现为Error in system，它应该呈现为Errorin system。
使用示例：

import parse from 'html-react-parser'

<ul>
  <li>{notiFicationData.text.html}</li>
  <li dangerouslySetInnerHTML={{ __html: notiFicationData.text.html }} />
  <li>{parse(notiFicationData.text.html)}</li>
</ul>

看起来像这样，在这里你可以看到字符串，因为它来自Hygraph：
x1c 0d1x知道为什么它不呈现粗体和其他文本视觉标记吗？

next.js

来源：https://stackoverflow.com/questions/76014799/render-markup-string-correctly-in-react

1条答案

按热度按时间

brccelvz1#

问题解决了。不是用最好的方法，但这是没有效率的摔跤太多与这种问题。
dangerouslySetInnerHTML完全按照它应该的那样工作。应用程序中的某个地方覆盖了strong，italic和其他HTML文本标签。从inspector computed选项卡中发现，strong font-weight计算为值400。我找不到覆盖它的地方。所以我创建了styled computed，在那里我覆盖了这些：

const NotificationText = styled.div`
  strong {
    font-weight: bold;
  }
  em {
    font-style: italic;
  }
  u {
    text-decoration: underline;
  }
`

<NotificationText dangerouslySetInnerHTML={{ __html: notificationData.text.html }} />

现在看起来不错：）

赞(0）回复(0）举报 2023-04-20

我来回答

next.js 在React中正确渲染标记字符串

1条答案

相关问题

热门标签

最新问答