與反應之外的功能組件通信

Question

我希望能夠在正常 HTML 中從組件外部與我的反應組件進行通信（由於將組件嵌入另一個系統而需要）。

我一直在研究這個，我看到建議你可以通過在呈現的元素上添加一個 ref 來將組件添加到window ，如下所示：

  ReactDOM.render(
    <Hello
      ref={(element) => {
        window.helloComponent = element;
      }}
    />,
    rootElement
  );

但對我來說它不起作用並生成此警告：

index.js:27 警告：無法為 Function 組件提供參考。 嘗試訪問此 ref 將失敗。 你是想使用 React.forwardRef() 嗎？

該組件不會添加到 window object，因此在 React 組件外部的 html 按鈕中引用不起作用。

我一直在嘗試使用 createRef() 添加到 window 的各種方法，但無法弄清楚。 我無法將 forwardRef() 文檔與我當前的情況聯系起來。

這是我的代碼：

 const rootElement = document.getElementById("root"); if (rootElement) { ReactDOM.render( <Hello ref={(element) => { window.helloComponent = element; }} />, rootElement ); } function Hello() { function alertOne() { alert("hi from 1"); } return ( <div> <h1>Hello, world; </h1> <UpdateButton /> </div> ); } function UpdateButton() { function alertTwo() { alert("hi from 2"); } return <button onClick={alertTwo}> Click Me Inside React</button>; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <button onclick="window.helloComponent.alertOne()"> Click me outside react </button> <div id="root"></div>

我想知道從任何反應組件外部訪問alertOne()和alertTwo()的正確技術，僅來自組件呈現的同一頁面上的 html。

Answer 1

將function保存在window object中：

 const rootElement = document.getElementById("root"); if (rootElement) { ReactDOM.render( <Hello />, rootElement ); } function Hello() { function alertOne() { alert("hi from 1"); } window.helloComponentAlert = alertOne; return ( <div> <h1>Hello, world; </h1> <UpdateButton /> </div> ); } function UpdateButton() { function alertTwo() { alert("hi from 2"); } return <button onClick={alertTwo}> Click Me Inside React</button>; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <script> const handleClick = () => { window.helloComponentAlert(); } </script> <button onclick="handleClick()">Click me outside react</button> <div id="root"></div>

---

事件驅動方法：

 const rootElement = document.getElementById("root"); if (rootElement) { ReactDOM.render( <Hello/>, rootElement ); } function Hello() { function alertOne() { alert("hi from 1"); } React.useEffect(() => { window.addEventListener( "someEvent", alertOne, false ); }, []); return ( <div> <h1>Hello, world; </h1> <UpdateButton /> </div> ); } function UpdateButton() { function alertTwo() { alert("hi from 2"); } return <button onClick={alertTwo}> Click Me Inside React</button>; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <script> const handleClick = () => { var someEvent = new Event("someEvent"); window.dispatchEvent(someEvent); } </script> <button onclick="handleClick()">Click me outside react</button> <div id="root"></div>

---

傳遞附加數據的事件驅動方法：

 const rootElement = document.getElementById("root"); if (rootElement) { ReactDOM.render( <Hello/>, rootElement ); } function Hello() { function alertOne(e) { alert("hi from 1 " + e.detail); } React.useEffect(() => { window.addEventListener( "someEvent", alertOne, false ); }, []); return ( <div> <h1>Hello, world; </h1> <UpdateButton /> </div> ); } function UpdateButton() { function alertTwo() { alert("hi from 2"); } return <button onClick={alertTwo}> Click Me Inside React</button>; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <script> const handleClick = () => { var someEvent = new CustomEvent("someEvent", {detail: "SomeAdditionalData"}); window.dispatchEvent(someEvent); } </script> <button onclick="handleClick()">Click me outside react</button> <div id="root"></div>

Answer 2

 const rootElement = document.getElementById("root"); window.alertEvent = new Event('alert'); if (rootElement) { ReactDOM.render( <Hello/>, rootElement ); } function Hello() { function alertOne() { alert("hi from 1"); } window.addEventListener('alert',alertOne); return ( <div> <h1>Hello, world; </h1> <UpdateButton /> </div> ); } function UpdateButton() { function alertTwo() { alert("hi from 2"); } return <button onClick={alertTwo}> Click Me Inside React</button>; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <button onclick="window.dispatchEvent(window.alertEvent)"> Click me outside react </button> <div id="root"></div>

Answer 3

這是我創建的一個示例，您可以在其中使用 javascript 中的事件發布訂閱模式傳遞一些值。

https://codesandbox.io/s/react-playground-forked-r7dfn?file=/index.js