تحويل السلسلة إلى HTML حقيقي في React.js

2

تلقيت معلومات من API التي تأتي مع HTML. ما يحدث هو ، عندما أحاول عرض المعلومات في الشفرة ، فإنه يحول HTML في سلسلة ولا يقرأ على أنه HTML حقيقي.
أنا أبحث كثيرًا وكل ما رأيته كان طريقة dangerouslySetInnerHTML ولكني رأيت أيضًا بعض المراجعات والتعليقات حوله ولا أريد استخدامه إذا كان هناك حل آخر. أيضا ، حاولت استخدام Fragmant لكن ليس النجاح.

أدناه هو رمز تصيير ():

return (
  <div>
    {models.map(model => (
      <a href="/sofa">
        <div className="Parcelas" key={model.id}>
          <img
            src={"url" + model.image}
            className="ParcImage"
            alt="sofa"
          />
          <h1>Sofá {model.name}</h1>
          <h2>
            1,200<span>€</span>
          </h2>

          <p className="Features">{model.description}</p>

          <button className="Botao">
            <p className="MostraDepois">Ver Detalhes</p>
            <span>+</span>
          </button>
          <img src="../../img/points.svg" className="Decoration" alt="points" />
        </div>
      </a>
    ))}
  </div>
);

هذه صورة تظهر:

Imagen 2067

2 الاجابة

2
افضل جواب

إذا كان لديك html في سلسلة ، يمكنك استخدامها dangerouslySetInnerHTML لتقديمه كملف HTML.

return (
  <div>
    {models.map(model => (
      <a href="/sofa">
        <div className="Parcelas" key={model.id}>
          <img
            src={"url" + model.image}
            className="ParcImage"
            alt="sofa"
          />
          <h1>Sofá {model.name}</h1>
          <h2>
            1,200<span>€</span>
          </h2>

          <p
            className="Features"
            dangerouslySetInnerHTML={{ __html: model.description }}
          />

          <button className="Botao">
            <p className="MostraDepois">Ver Detalhes</p>
            <span>+</span>
          </button>
          <img src="../../img/points.svg" className="Decoration" alt="points" />
        </div>
      </a>
    ))}
  </div>
);
:مؤلف
1
افضل جواب

تحقق مما إذا كان النص الذي تحاول إلحاقه بالعقدة لا يتم تجاوزه كما يلي:

model: {
  description: '&lt;h1&gt;Hi there!&lt;/h1&gt;'
}

بدلا من هذا:

model: {
  description: '<h1>Hi there!</h1>'
}

إذا تم الهروب ، يجب عليك تحويله من جانب الخادم الخاص بك.

إذا لم تتمكن من تجربة شيء مثل هذا:

<p className="Features">{model.description.fromCharCode(183)}</p>

خيار آخر هو مزيج من ReactHtmlParser و unescapingHtml:

https://codesandbox.io/s/j4lj4yonw

import ReactHtmlParser from "react-html-parser";

let model = [
  {
    description: "<h1>Hello There</h1>"
  },
  {
    description: "&lt;h1&gt;Hello There&lt;/h1&gt;"
  }
];

function App() {
  function unescapeHTML(html) {
    var escapeEl = document.createElement("textarea");
    escapeEl.innerHTML = html;
    return escapeEl.textContent;
  }

  return (
    <div className="App">
      {model.map(des => {
        return ReactHtmlParser(unescapeHTML(des.description));
      })}
    </div>
  );
}
:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام