我们可以渲染存储在 ReactJs 的 useRef 变量中的 div 引用吗

Question

实际上我正在尝试创建一个弹出窗口，当用户单击特定元素的展开视图时，它允许用户在弹出窗口中看到展开的视图有一系列不止一个元素

要求：-问题是有多个元素，无论何时单击该元素，它都应该在弹出窗口中打开。 你可以把它想象成一个联系人网格，每当你点击任何一个联系人时，它应该在弹出窗口中查看

我目前的方法：-

当用户单击该元素时，我将元素引用保存到变量并尝试将引用作为子道具传递

但出现错误

欢迎提出不同的建议。

提前致谢

import React from "react";

const Summary = () => {

  const [expand, SetExpand] = useState<boolean>(false);
  const expendRef = useRef<HTMLDivElement>(null);

  return <div >
    {expand && <><span>hello</span> {
    }<Popup show={expand}>
      {expendRef.current?.parentNode }
    </Popup></>}
     <div ref={expendRef} className='summary-table col-md-6' onClick={()=>SetExpand(!expand)>
             Reference element
     </div>
   </div>
        
}


const Popup=(props)=>{
render(<>
<h1>Popup Element</h1>
<div>{props.children}</props>
<>)

}

export default Summary

Answer 1

你的想法非常有创意和有趣，将 div 放在弹出窗口中。 我想我按照你想要的方式做了，但这有点老套，我不得不创建一个带有 append 孩子的 DOMElement，奇怪的解决方案......它会是这样的：

import React, { useEffect, useRef, useState } from "react";

const Summary = () => {
  const [popupVisible, setPopupVisible] = useState<boolean>(false);
  const [element, setElement] = useState() as any;

  const showElementOnPopUp = (e: any) => {
    if (!popupVisible) setPopupVisible(true);
    const elementClone = e.currentTarget.cloneNode(true);
    elementClone.querySelector("div").style.display = "block";
    setElement(elementClone);
  };

  return (
    <div>
      <div className="summary-table col-md-6" onClick={showElementOnPopUp}>
        Contact 1
        <div style={{ display: "none" }}>
          <p>Number: 111111</p>
          <p>Address: House 1</p>
        </div>
      </div>

      <div className="summary-table col-md-6" onClick={showElementOnPopUp}>
        Contact 2
        <div style={{ display: "none" }}>
          <p>Number: 222222</p>
          <p>Address: House 2</p>
        </div>
      </div>

      <div className="summary-table col-md-6" onClick={showElementOnPopUp}>
        Contact 3
        <div style={{ display: "none" }}>
          <p>Number: 333333</p>
          <p>Address: House 3</p>
        </div>
      </div>

      {popupVisible && (
        <Popup element={element} setPopupVisible={setPopupVisible}></Popup>
      )}
    </div>
  );
};

const Popup = (props: any) => {
  const { element, setPopupVisible } = props;

  return (
    <>
      <h1>Popup Element</h1>
      <div>
        <DOMElementContainer element={element} />
      </div>
      <button
        onClick={() => {
          setPopupVisible(false);
        }}
      >
        Close Popup
      </button>
    </>
  );
};

const DOMElementContainer = ({ element }: any) => {
  const ref = useRef() as any;

  useEffect(() => {
    if (!element) return;
    ref.current.innerHTML = "";
    ref.current.appendChild(element);
  }, [element]);

  return <div ref={ref}></div>;
};

export default Summary;

但我认为更好的方法是这个，更好地使用 react state，并且更真实，你可以从一些 api 获得联系人列表：

import React, { useEffect, useRef, useState } from "react";

const Summary = () => {
  const [popupVisible, setPopupVisible] = useState<boolean>(false);
  const [contactList, setContactList] = useState() as any;
  const [contactInfo, setContactInfo] = useState() as any;

  const someApiCall = () => {
    return Promise.resolve([
      { name: "Contact 1", number: "11111", address: "House 1" },
      { name: "Contact 2", number: "222222", address: "House 2" },
      { name: "Contact 3", number: "333333", address: "House 3" },
    ]);
  };

  useEffect(() => {
    someApiCall().then((data) => {
      console.log(data);

      setContactList(data);
    });
  }, []);

  return (
    <div>
      {contactList?.map((contact: any) => {
        return (
          <div
            onClick={() => {
              setContactInfo(contact);
              setPopupVisible(true);
            }}
          >
            {contact.name}
          </div>
        );
      })}

      {popupVisible && (
        <Popup
          contactInfo={contactInfo}
          setPopupVisible={setPopupVisible}
        ></Popup>
      )}
    </div>
  );
};

const Popup = (props: any) => {
  const { contactInfo, setPopupVisible } = props;

  return (
    <>
      <h1>Popup Element</h1>
      <div>
        <p>Name: {contactInfo.name}</p>
        <p>Number: {contactInfo.number}</p>
        <p>Address: {contactInfo.address}</p>
      </div>
      <button
        onClick={() => {
          setPopupVisible(false);
        }}
      >
        Close Popup
      </button>
    </>
  );
};

export default Summary;

Answer 2

你想做的是一个有趣的功能，但我相信你可以按照 React 模式和重用组件来完成。 话虽如此，我将尝试以简单的方式回答您的问题。

你的问题的答案：

const Summary = () => {
  const [expand, setExpand] = useState(false)
  const expendRef = useRef(null)

  return (
    <div>
      {expand && (
        <>
          <span>hello</span>
          <Popup show={expand} element={expendRef} />
        </>
      )}
      <div 
         ref={expendRef} 
         className="summary-table col-md-6" 
         onClick={() => setExpand(!expand)}
      >
        {'Reference element'}
      </div>
    </div>
  )
}

const Popup = (props) => {
  return (
    <>
      <h1>Popup Element</h1>
      <div dangerouslySetInnerHTML={{ __html: props.element.current.outerHTML }} style={{ background: 'red' }} />
     {/* Background red is just to do it obvious, when its render */}
    </>
  )
}

怎么运行的？

默认情况下，React 将 HTML 转义为跨站点脚本，但是如果你真的想渲染一些 HTML，你可以使用dangerouslySetInnerHTML属性。 然后你可以拿你参考的 HTML 做.current.outerHTML

代码示例

https://codepen.io/FMadoery/pen/VwdGqwM

Answer 3

你不能用ref做到这一点！

你可以这样做：

import React from "react";

const Summary = () => {

   const [expand, SetExpand] = useState<boolean>(false);

   const renderContent = () => (
      <div ref={expendRef} className='summary-table col-md-6' onClick={()=>SetExpand(!expand)>
         Reference element
      </div>
   )

   return (
      <div >
         {expand && <><span>hello</span>
         <Popup show={expand}>
            {renderContent()}
         </Popup></>}
         {renderContent()}
      </div>       
}

export default Summary;