简体   繁体   中英

React Render HTML object from JSON object

I have to render html object Array in React JS Can anyone guide me how to use renderHTML function. output of the object is something like this: "

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

output i get => "item.albComEn" or {item.albComEn}

You can try with template strings. More info

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>

You can also use short syntax of React Fragments ie '<> </>'. Use these to bracket to write the html code. When rendered the html code will successfully compiled. Example:

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>
            </>
        },
]

Use inside render method as

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM