如何从 JSON 文件中读取 HTML 文本

Question

我无法在我的 React 应用程序中读取 JSON 文件内容中使用的 HTML 标签。

JSON 文件：

[{
    "_id": 9,
"title":"Text 9",
    "subheader":"Dummy header 9",
    "images": "images/four-1.png",
    "imagesmob" : "images/four-1.webp",
    "content":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec velit consectetur, pretium risus vel, eleifend tortor. Integer enim nulla, iaculis sit amet leo vel, sagittis maximus leo. Aliquam semper sapien bibendum nulla consectetur, ut eleifend arcu accumsan. Duis consequat diam sed dolor convallis semper. Ut justo mauris, accumsan non tempus ut, ultrices at tellus. Quisque a sapien urna. Maecenas tempor consequat sollicitudin. Nullam volutpat a eros sit amet vestibulum. Cras sollicitudin vitae urna nec varius. Etiam nec facilisis urna.</p> <p>Donec ut dui condimentum, tincidunt tellus vitae, interdum lorem. Phasellus eget pretium enim. Morbi accumsan turpis vitae turpis venenatis ullamcorper. Proin pretium nisi nec nulla faucibus, a hendrerit turpis malesuada. Nullam id faucibus metus, id faucibus metus. Donec et massa suscipit, congue tortor non, ultricies turpis. Aliquam venenatis massa velit, id ornare ante efficitur vitae. Vivamus id dui tortor. Pellentesque sem mi, bibendum a orci hendrerit, mollis eleifend eros. Nunc sodales orci purus. Vivamus molestie porta egestas. <p>Suspendisse convallis mi ullamcorper, dapibus nisi a, semper felis. Praesent ut lacus eu neque vestibulum efficitur.<\/p> Sed dolor magna, mattis a ultricies vel, <b>tincidunt<\/b> eget enim.<\/p>"
}
]

反应文件

<Card variant="outlined" sx={{ maxWidth:345, borderRadius: '11px' }} elevation={3}>
           <CardMedia
        component="img"
        height="194"
        image={welcom.images}
        alt="Home Page"
       
      />
        
      <CardHeader
       
        titleTypographyProps={{fontSize: 18, fontWeight: 'bold', color: 'purple' }}
        title = {welcom.title}
        
        subheader = {welcom.subheader}
        />
        
            <CardContent>
              <div>{welcom.content}</div>
            </CardContent>
         
        </Card>

在这种情况下，当我尝试从 json 文件中读取内容时，我无法获取粗体文本或段落也没有出现。任何帮助。

Answer 1

您无法在 React 中渲染原始 html。为此，您可以使用 dangerouslySetInnerHTML 属性，但在使用此属性之前应小心。根据 reactjs 文档，

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

我根据你的代码创建的。

如何从 JSON 文件中读取 HTML 文本

How to read HTML Text from JSON file

json

reactjs

material-ui

mern