如何通过危险的HTML函数返回我的数据字符串以呈现粗体标签？

Posted 2023-02-23

【中文标题】如何通过危险的HTML函数返回我的数据字符串以呈现粗体标签？

【英文标题】：How can I return my data string through a dangerouslyHTML function in order to render out bold tags?

【发布时间】：2018-03-24 22:20:33

【问题描述】：

我有一个 React 应用程序。我试图弄清楚如何从带有粗体标签的对象呈现字符串。当我渲染数据时，渲染器会选择新的行标签，但会忽略粗体标签并将它们打印为文本......示例：hi

如何使用粗体标签呈现我的内容字符串？我应该以不同的方式存储字符串吗？下面是我的数据和渲染函数

const imgPath = '.app/img/';

const Data = 
    
        name: 'helpdesk',
        title: 'Help Desk',
        content: `Welcome to the <b>Help Desk</b>.\n\n From here you will be able to troubleshoot various problems.\n\n`,
        image: `$imgPathhelpDesk.PNG`
    


export default Data;

渲染

const renderHelpFile = this.props.data.filter(obj => 
            return this.props.name === obj.name;
                ).map((obj, idx) => 
                return (
                    <div key=idx className="fadingDiv">
                        <div className="displayLineBreak">  
                            <h2 style=upperStyle> obj.name </h2>s
                            obj.content
                        </div>
                        <div className="divImg">
                            <img src=`$obj.image` className="helpFileImg" onClick=this.openModal></img><br />
                            <Modal
                                isOpen=this.state.modalIsOpen
                                onAfterOpen=this.afterOpenModal
                                onRequestClose=this.closeModal
                                style=customStyles
                                contentLabel="Lewis Controls"
                             >
                                <center>
                                <p style=upperStyle className="modalTitle">obj.name</p>
                                <div className="imgModal"><img src=`$obj.image` className="helpFileImg"></img></div>
                                </center>
                            </Modal>
                        </div>
                    </div>
                );
        );

【问题讨论】：

Reactjs convert to html的可能重复

您可能还想查看 react-render-html npm 包 npmjs.com/package/react-render-html 作为更好的选择。

【参考方案1】：

您需要使用dangerouslySetInnerHTML 属性来渲染出Data.content。

dangerouslySetInnerHTML 是 React 在 浏览器 DOM。

function createMarkup() 
  return __html: 'First · Second';


function MyComponent() 
  return <div dangerouslySetInnerHTML=createMarkup() />;

编辑：

const getRawHTML = html => ( __html: html );

const renderHelpFile = this.props.data.filter(obj => 
    return this.props.name === obj.name;
).map((obj, idx) => 
    return (
        <div key=idx className="fadingDiv">
            <div className="displayLineBreak">
                <h2 style=upperStyle> obj.name </h2>s
                <div dangerouslySetInnerHTML=getRawHTML(obj.content)></div>
            </div>
            <div className="divImg">
                <img src=`$obj.image` className="helpFileImg" onClick=this.openModal></img><br />
                <Modal
                    isOpen=this.state.modalIsOpen
                    onAfterOpen=this.afterOpenModal
                    onRequestClose=this.closeModal
                    style=customStyles
                    contentLabel="Lewis Controls"
                >
                    <center>
                        <p style=upperStyle className="modalTitle">obj.name</p>
                        <div className="imgModal"><img src=`$obj.image` className="helpFileImg"></img></div>
                    </center>
                </Modal>
            </div>
        </div>
    );
);

【讨论】：

我已经看到了一些关于这个的东西，只是真的不知道如何设置它。使用 HTML，我可以只使用 innerHTML。我必须为此做一个正则表达式？

@user3622460 不，没有正则表达式。您只需创建一个特殊对象，其键为 __html，其值为原始 html 字符串。

我怎么能通过它返回一个对象呢？我的对象有多个字符串，并通过映射呈现出来

@AustinGreco 也提供了一个很好的解决方案。将 html 存储为 JSX，您不必担心这一点。

【参考方案2】：

你可以用dangerouslySetInnerHTML来做，但如果可能的话，最好直接用JSX做：

import React from 'react';
const imgPath = '.app/img/';

const Data = 
    
        name: 'helpdesk',
        title: 'Help Desk',
        content: (
          <span>Welcome to the <b>Help Desk</b>.\n\n From here you will be able to troubleshoot various problems.\n\n</span>
        ),
        image: `$imgPathhelpDesk.PNG`