JSX вместо HTML в Sweet Alert

Question

Я хотел бы написать JSX в Sweet Alert так:

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 ошибку.

Как мне написать JSX в Sweet Alert html?

Answer 1

Из документов

Чтобы использовать SweetAlert с синтаксисом JSX, вам необходимо установить SweetAlert с React. Обратите внимание, что в вашем файле package.json должны быть оба sweetalert и @ sweetalert / with-реагировать как зависимости.

Вам необходимо установить @sweetalert/with-react,

npm install @sweetalert/with-react --save

Импорт

import swal from '@sweetalert/with-react'

и использование

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

Демо