如何在 setContent 传单中调用反应组件？

Question

如何调用setContent中的react js组件？实际上，我想在弹出传单中插入一个按钮，点击它并调用一个反应组件。我知道 "reactDomserver.rendertostring" 是一种将组件串成 HTML 的方法。但是当组件变为 HTML 时，无法单击按钮调用另一个组件。如果有人能帮助我，我将不胜感激。

示例代码如上：

            // adding mouse hover popup
            hoverPopup = L.popup({ closeButton: false, className: "hover-popup" });
            hoverPopup.setContent(`<div>
                <div class="icon">
                <ul class="menu">
                  
                  <li class="spread">
                        <button onclick={()=>CustomComponent()}> Test </button> /////// Here is Error
                  </li>
                 
                </div>`);
            marker.on('mouseover', function (e) {
                hoverPopup.setLatLng(e.latlng);
                hoverPopup.openOn(MAP);

            });

Answer 1

首先，您需要更改 Html 内容中的“onclick”功能。这是纯粹的 html 而不是正确的语法。

错误：

onclick={()=>CustomComponent()}

正确：

onclick="CustomComponent()"

之后，您可以使用 useEffect 监听内容变化，如果内容存在，您可以使用纯 javascript 添加点击事件。像这样；

演示：https://codesandbox.io/s/Whosebug-69979099-35hyb?file=/src/App.js

export default function App() {
  const [content, setContent] = useState(null);
  useEffect(() => {
    if (content) {
      document.getElementById("btn").onclick = (e) => {
        e.preventDefault();
        eval(e.target.getAttribute("onclick"));
      };
    }
  }, [content]);
  const CustomComponent = () => {
    alert("Custom Component Func!");
  };
  return (
    <div className="App">
      <button onClick={() => {setContent(`<div>
        <div class="icon">
        <ul class="menu">
          
          <li class="spread">
                <button id="btn" onclick="CustomComponent()"> Test </button>
          </li>
         
        </div>`);
        }}
      >
        Show Content
      </button>
      <button>Hide Content</button>
      <hr />
      {content && <div dangerouslySetInnerHTML={{ __html: content }} />}
      <div></div>
    </div>
  );
}

如何在 setContent 传单中调用反应组件？

How can I call react component in setContent leaflet?

javascript

leaflet

reactjs