如何在 ReactJS JSX 中调用从 NodeJS 返回的 JavaScript Function

Question

I want to make a function that creates a button in the React DOM.
That function should be returned from NodeJS.

NodeJS - localhost:8000/stripe-form returns:

function myFunction() {
    var btn = document.createElement("BUTTON");
    btn.innerHTML = "CLICK ME";
    document.body.appendChild(btn);
}

In ReactJS:

    function App() {
      return (
        <div className="App">
          <script type="text/javascript" src="http://localhost:8000/stripe-form"></script>
        </div>
      );
}

How can I do something similar to this in JSX:

<button onClick={myFunction} />

Answer 1

Have a look at https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Something like this may do the trick (using https://github.com/axios/axios for data loading).

async function createMarkup() {
  const htmlData = await axios.get("http://localhost:8000/stripe-form")
  return {__html: htmlData};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}