Блог

У меня есть требование показать HTML-шаблон, обслуживаемый из JSON API, с пользовательскими тегами на нем. Эти пользовательские теги должны быть заполнены другим объектом JSON. Пожалуйста, помогите.

Я могу заполнить HTML-код на странице, но не могу связать пользовательскую переменную со значением JSON в ней.

Например:

 import React, {  useEffect, useState } from 'react';
import axios from 'axios';
import ReactHtmlParser from 'react-html-parser';

const DynamicContainer = () => {
  const [result, setResult] = useState([]);
  let HTML3 = '';
  let title = '';

  useEffect(() => {
    axios.get(`http://localhost:3000/data`)
    .then(res => {
      setResult({
        jsonContent:res.jsonContent,
        jsonHtml:res.jsonHtml
      })
    })
    .catch(error => {
      console.log(error);
      setResult({error})
    });
  }, []);

  if(result != "") {
    title = result.jsonContent.title
    HTML1 = result.jsonHtml;
  }

  return (
    <div>
        {ReactHtmlParser(HTML1)}
    </div>

  //<div className="" dangerouslySetInnerHTML={{ __html: result.jsonHtml}}></div>
  )
}

export default DynamicContainer;
 

/Формат / JSON (
несколько похож на этот формат JSON, имеющий HTML-шаблон и значение JSON
Это в моем локальном, в производстве, будет 2 API, обслуживающих HTML и JSON.
) :

 {
  [
    "jsonHTMl":{
      "<div class="card "><h1>${title}</h1></div>"
    },
    "jsonContent": {
      "title": "Hello World"
    }
  ]
}
 

……………. Новый API…………….
У меня есть один HTML-шаблон, который подается из API, и несколько значений массива для заполнения в одной и той же структуре HTML. Как справиться с этим в react js.
{

 "all_events": [
  {
    "events_value":[
      
    {
      "event_id": 100,
      "title": "Webinar Professionals's Tech Stack",
      "image": "../assets/webinar.png",
      "date": "12/02/2021",
      "description":"Dummy text is text that  "

  },
  {
    "event_id": 101,
      "title": "Boy and Girl Website",
      "image": "../assets/webinar.png",
      "date": "22/03/2021",
      "description":"If the distribution of "

  }
    ],
    "events_template":["<div class="card shadow-sm" id=${event_id}>n<img src=${image} class="img-fluid mw-md-150 mw-lg-130 mb-6 mb-md-0" alt="..." />n<div class="card-body">n<h3 class="card-text">${title}</h3>n<p class="card-text">On ${date}</p>n<p class="card-text">${description}</p>n<div class="text-center">n<a href="/event/${event_id}" className='mt-4 btn btn-primary'>n Detailsn</a>n</div>n</div>n</div>"]
  }
]
 

}

у Lodash есть простой шаблон шаблонизатора.

 const compiled = _.template(result.jsonHtml);
const html = compiled(result.jsonContent)
 

Для нового api

 data["all_events"].forEach(events => {
    const templates = events["events_template"];
    const values = events["events_value"];
    templates.forEach(template => {
        values.forEach(value => {
            const compiled = _.template(template);
            const html = compiled(value)
            // html is the processed result. Perhaps you want collect them to an array?
        })
    })
})
 

Вот ссылка на изолированную среду.