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 中编写 JSX html？

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

Sweet Alert 中的 JSX 而不是 HTML

JSX instead of HTML in Sweet Alert

javascript

jsx

reactjs

sweetalert2