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

Question

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

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

const imgPath = '.app/img/';
const Data = {
    {
        name: 'helpdesk',
        title: 'Help Desk',
        content: `Welcome to the <b>Help Desk</b>.nn From here you will be able to troubleshoot various problems.nn`,
        image: `${imgPath}helpDesk.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>
                );
        });

Answer 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>
    );
});

Answer 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>.nn From here you will be able to troubleshoot various problems.nn</span>
        ),
        image: `${imgPath}helpDesk.PNG`
    }
}