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

为了将SweetAlert与JSX语法一起使用，您需要在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

Sweet Alert中的JSX而不是HTML

1 个答案: