0

我从使用“dangerouslySetInnerHTML”在页面上呈现的 API 获得了一些 HTML 字符串响应。现在这个 HTML 有一些空的 div 标签和一个类 "js-lead-in-content" 。

我想在这些 div 中显示一个自定义组件。为此，我正在使用 react 门户，并且能够在这些空 div 中呈现我的自定义组件。但是我面临一个问题，即每当父组件更新由“dangerouslySetInnerHTML”设置的 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;

我网站上的页面有几个标签，每个标签都有一些标题和描述。Whenever the tab changes the new data is sent to the above component and it renders it. 但仅对于加载的第一个选项卡，我才能看到其余选项卡的门户没有任何反应。

此外，如果我记录“document.getElementsByClassName('js-lead-in-content')[0]”，它总是会记录活动选项卡的新 DOM 节点。

可能出了什么问题？

4

1 回答 1

0

看起来您将第一次渲染时的 showData 设置为 true。这可能会在标题 html 呈现之前触发 createPortal()。

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;
于 2020-02-21T12:45:58.867 回答