كيفية إضافة كود HTML يتم إحضاره من Ajax في مكون React؟

سبب المشكلة هو أنه لا يتم تفسير النص ك شيفرة HTML ولا يتم عمل render لها لذلك يجب تطبيق المنطق التالي:

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.posts }} />
    );
  }

أو

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.posts) }} />
    );
  }

مرحباً بك: 
يمكنك استخدام مكتبة react-render-html من npm 
 

<div>
  {renderHTML(this.state.posts)}
</div>

في أغلب الأحيان سوف تحتاج تنظيف ال html  أو تعديله قليلا قبل حقنه لذا من المنصوح به أن تعين دالة خارجية لتتكفل بالأمر 

const injectHtml = __html => ({
  __html
});

const Component = ({ html }) => (
  <div>
    <div dangerouslySetInnerHTML={injectHtml(html)} />
  </div>
);

اذا كان لديك محتةى في ال html مثل هذا 

<em>نص ما هنا:</em>

يمكنك معالجته باستخدام unescape من مكتبة lodash

import _ from 'lodash';

const injectHtml = html => ({
  __html: _.unescape(html),
});


const Component = ({ html }) => (
  <div>
    <div dangerouslySetInnerHTML={injectHtml(html)} />
  </div>
);