ReactDOM.createPortal не обновляется - PullRequest
Новая
       5

ReactDOM.createPortal не обновляется

0 голосов
/ 02 февраля 2020

У меня есть какой-то HTML строковый ответ от API, который я отображаю на странице, используя «dangerouslySetInner HTML». Теперь у этого HTML есть несколько пустых тегов div с классом "js -lead-in-content".

Я хочу показать пользовательский компонент внутри этих элементов div. Я использую портал реагирования для этой цели, и я могу визуализировать свой пользовательский компонент внутри этих пустых элементов div. Но я сталкиваюсь с проблемой, заключающейся в том, что всякий раз, когда родительский компонент обновляет строку HTML, установленную параметром "dangerouslySetInner HTML". Пользовательские компоненты не добавляются в пустые элементы div. 

const ExamDetails = props => {
  const { title, description } = props.content;
  const [showData, setShowData] =  useState(false);

  useEffect(() => {
    setShowData(true);
  }, [title])

  return (
    <>
      <div
        className="font-weight-bold h2"
        dangerouslySetInnerHTML={{ __html: title }}
      />
      <div
        className="content-side"
        dangerouslySetInnerHTML={{ __html: description }}
      />
      {showData && ReactDOM.createPortal(
            <h1>gurmeet</h1>,
            document.getElementsByClassName('js-lead-in-content')[0]
          )}
    </>
  );
};

export default ExamDetails;

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

Более того, если я войду в систему "document.getElementsByClassName ('js -lead-in-content) ') [0] "всегда регистрирует новый узел DOM для активной вкладки.

Что может быть не так?

1 Ответ

0 голосов
/ 21 февраля 2020

Похоже, вы устанавливаете showData при первом рендеринге в true. Это может привести к срабатыванию createPortal () до отображения заголовка html. 

const ExamDetails = props => {
  const { title, description } = props.content;
  const [showData, setShowData] =  useState(false);

  useEffect(() => {
     console.log(title);
    //only set true once this component has received the title prop
    if(title !== undefined && title !== null){ 
       setShowData(true);
    }
  }, [title])

  return (
    <>
      <div
        className="font-weight-bold h2"
        dangerouslySetInnerHTML={{ __html: title }}
      />
      <div
        className="content-side"
        dangerouslySetInnerHTML={{ __html: description }}
      />
      {showData && ReactDOM.createPortal(
            <h1>gurmeet</h1>,
            document.getElementsByClassName('js-lead-in-content')[0]
          )}
    </>
  );
};

export default ExamDetails;
...