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

في أغلب الأحيان سوف تحتاج تنظيف ال 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>
);

سبب المشكلة هو أنه لا يتم تفسير النص ك شيفرة 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>