如何在 ReactJS JSX 中调用从 NodeJS 返回的 JavaScript 函数答案

【问题标题】：How To Call A JavaScript Function Returned From NodeJS in ReactJS JSX如何在 ReactJS JSX 中调用从 NodeJS 返回的 JavaScript 函数
【发布时间】：2020-10-28 16:28:31
【问题描述】：

我想创建一个在 React DOM 中创建按钮的函数。
该函数应该从 NodeJS 返回。

NodeJS - localhost:8000/stripe-form 返回：

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

在 ReactJS 中：

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

如何在 JSX 中做类似的事情：

<button onClick={myFunction} />

【问题讨论】：

标签： javascript html node.js reactjs jsx

【解决方案1】：

看看https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

这样的事情可能会奏效（使用https://github.com/axios/axios 进行数据加载）。

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

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

【讨论】：