甜蜜警报中的 JSX 而不是 HTML

Question

我想像这样在 Sweet Alert 中编写 JSX：

class TodoApp extends React.Component { 
  componentDidMount() {
    swal({
      html: <Welcome />
    });
  };

  render() {
    return <Welcome />;
  }
}

const Welcome = (props) => <p>Welcome to Sweet Alert and React</p>;

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

但我收到Uncaught TypeError: t.html.cloneNode is not a function 错误。

如何在 Sweet Alert html 中编写 JSX？

Answer 1

来自docs

为了使用带有 JSX 语法的 SweetAlert，您需要安装带有 React 的 SweetAlert。请注意，您需要在 package.json 中同时拥有 sweetalert 和 @sweetalert/with-react 作为依赖项。

你需要安装@sweetalert/with-react，

npm install @sweetalert/with-react --save

导入

import swal from '@sweetalert/with-react'

和用法

swal(<Welcome />) //No need of `html` key

Demo