与反应之外的功能组件通信

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