javascript - Sweet Alert 中使用 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

In order to use SweetAlert with JSX syntax, you need to install SweetAlert with React. Note that you need to have both sweetalert and @sweetalert/with-react as dependencies in your package.json.

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

npm install @sweetalert/with-react --save

导入

import swal from '@sweetalert/with-react'

和用法

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

Demo