从 JSON 对象反应渲染 HTML 对象答案

【问题标题】：React Render HTML object from JSON object从 JSON 对象反应渲染 HTML 对象
【发布时间】：2020-06-12 07:20:59
【问题描述】：

我必须在 React JS 中渲染 html 对象数组谁能指导我如何使用 renderHTML 功能。对象的输出是这样的： "

 const items = this.state.Data.map(item => (
      <div key={item._id}>{renderHTML("{item.albComEn}")}</div>

another variation i tried 

const items = this.state.Data.map(item => (
      <div key={item._id}>{renderHTML("item.albComEn")}</div>
    ));

我得到的输出 => "item.albComEn" 要么 {item.albComEn}

【问题讨论】：

item.albComEn 中有什么内容？你希望得到什么？
JSON 数组被映射。 “item”是一个用于数组元素的虚拟变量。 albComEn 是数据包含的元素之一。

标签： json reactjs render-html

【解决方案1】：

您可以尝试使用模板字符串。更多信息

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

const items = this.state.Data.map(item => (
      <div key={item._id}>{renderHTML(`${item.albComEn}`)}</div>

【讨论】：

【解决方案2】：

您还可以使用 React Fragments 的简短语法，即 ' >'。使用这些括号来编写 html 代码。呈现时，html 代码将成功编译。示例：

const service = [
        {
            htmlCode: <>
             <div>
               <h2>Application Screening</h2>
               <br />
               <br />
               What you can expect from us:<br />
                -   Your resume will be written by a team of seasoned experts<br />
                -   They will make sure that your Resume presents your strong points,
                    achievements & key skills in a recruiter-friendly format.<br />
             </div>
            </>
        },
]

使用内部渲染方法

...
 render(
  <div>
       {service[0].htmlCode}
  <div>
 )
}

【讨论】：