从 JSON 对象反应渲染 HTML 对象

Posted 2023-03-24

【中文标题】从 JSON 对象反应渲染 HTML 对象

【英文标题】：React Render HTML object from JSON object

【发布时间】：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 是数据包含的元素之一。

【参考方案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>
 )