React: trigger an event or value outside the root component-CodePudding

Somebody could help me with this idea? I don't know if it were possible or should I use any library or skill.

Component (This is usually and common)

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>
  );
}

Connection HTML React Dom (This is usually and common)

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

import App from "./App";

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

Here the part that I don't know if it were possible

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

CodePudding user response：

If you are declaring the function in a script tag like that, it exists in the global window scope so you can just call it like this from your react component:

window.externalFn('any value')