React：触发根组件之外的事件或值答案

【问题标题】：React: trigger an event or value outside the root componentReact：触发根组件之外的事件或值
【发布时间】：2022-02-10 08:09:26
【问题描述】：

有人可以帮我解决这个想法吗？我不知道这是否可能或者我应该使用任何库或技能。

组件（这通常很常见）

import React, { useState } from "react";

export default function App() {
  const [anyVal, setAnyVal] = useState(0);

  return (
    <div className="App">
      <h1>Any Value: {anyVal}</h1>
      <button onClick={() => setAnyVal(anyVal + 1)}>Change value</button>
    </div>
  );
}

连接 HTML + React Dom（这很常见）

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

这里是我不知道是否可行的部分

  <body>
    <div id="root" onanyvaluechanged="externalFn(v)"></div>
    <script>
      function externalFn(newValue) {
        alert("I've detected the change:" + newValue);
      }
    </script>
  </body>

【问题讨论】：

您想将自定义事件监听器“onanyvaluechanged”添加到 div 以便触发全局函数？
谢谢。好吧，现在您提到使用全局函数可能是一种方法，并且应该解决该问题。但是如果它是一个本地函数呢？
在窗口范围内声明的任何函数都是全局的，因此可以从任何范围访问它。想想任何窗口（如 .setInterval）或文档（.querySelector）方法。对于大多数应用程序来说，自定义全局函数不是一个好的做法，因为它可能会产生冲突，即污染全局空间。本地函数将在一个范围内，因此如果您需要在正文中访问它，则必须在该范围内访问它。
谢谢你们的帮助。我正在研究，发现一篇文章谈到了类似medium.com/vena-engineering/… --- 这里有一个例子：codepen.io/lokcito/pen/yLPbjpv

标签： javascript html reactjs react-dom

【解决方案1】：

如果你在这样的脚本标签中声明函数，它存在于全局窗口范围内，所以你可以像这样从你的反应组件中调用它：

window.externalFn('any value')

【讨论】：