Рендеринг реагирующих компонентов среды обитания через HTML, которые прошли через опору

Question

В настоящее время я использую среду реагирования в проекте, и у меня есть компоненты, выполняющие рендеринг, например:

<div data-component="MyComponent" data-prop-titl="My title"></div>

Я столкнулся с проблемой, когда я пытаюсь пройти через некоторую разметку из редактора форматированного текста, который содержит разметку, как в примере выше.

Я хочу иметь возможность визуализировать расширенный текст со ссылками на компоненты реагирующей среды обитания внутри.

Таким образом, приведенная выше ссылка может быть в основном пропущена с помощью расширенного текста и все же отображаться как реактивный компонент.

Возможно ли это?

Answer 1

Я - первый автор React Habitat.

Вы столкнетесь с проблемами, помещающими HTML в строку атрибутов. Это та же проблема с JSON

Я бы просто сделал HTML go внутри компонента среды обитания, затем использовал бы переменную-посредник, которую React Habitat устанавливает для вас .

например

 <div data-component="MyWysiwygViewer">
     <h2>Some HTML text</h2>
     <p>With some body</p> 
 </div>

В компоненте я получу эти данные с:

 constructor(props) {
      super(props);

      const html = props.proxy.innerHTML;
 }

В качестве альтернативы

вы можете поместить его в скрытый div

 <div id="myHtml" style="display: none" >
     <h2>Some HTML text</h2>
     <p>With some body</p> 
 </div>

 <div data-component="MyWysiwygViewer" data-prop-html-id="myHtml" />

Тогда в компоненте я получу эти данные с:

 constructor(props) {
      super(props);

      const html = document.getElementById(props.htmlId).innerHTML;
 }

Answer 2

Возможно, что-то подобное может помочь

function createMarkup() {
  return {__html: '<div data-component="MyComponent" data-prop-titl="My title"></div>'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Но это очень рискованная практика и может подвергнуть ваших пользователей атаке межсайтового скриптинга (XSS)