javascript - Bagaimanakah kaedah Modal bertindak balas dalam Ant Financial memasukkan elemen ke hujung halaman?

Question

Saya mahu menggunakan react untuk menulis modul pop timbul awam, serupa dengan kaedah React Modal dari Ant Financial.

Saya tidak tahu apakah prinsip pelaksanaan ini? Bagaimanakah saya boleh memasukkan tetingkap pop timbul yang saya tulis ke penghujung halaman?

Answer 1

Lihat kod sumber pelaksanaan Modal, ia mudah difahami. Secara ringkasnya:

let p = createElement('p');
document.body.appendChild(p);
ReactDOM.render(<Modal />, p);

Answer 2

@ssruoyan
Bagaimana anda boleh melaksanakan ini menggunakan sintaks ES6?

Answer 3

Sama ada modal boleh dilihat bergantung pada keterlihatannya Ini ialah kod mudah alih yang ditulis hari ini. Tidak pasti apa yang anda maksudkan

Answer 4

Malah, ia dipaparkan di luar skop tindak balas dan menggunakan komponen

Ini melibatkan antara muka ReactDOM.unstable_renderSubtreeIntoContainer,
Tetapi antara muka ini tidak tersedia dalam dokumentasi dan ditandakan tidak stabil

Tandatangannya seperti ini

function(
    parentComponent,
    nextElement,
    container,
    callback,
  )

Mungkin boleh guna macam ni

componentDidMount() {
    const container = document.createElement('p');
    document.body.appendChild(container);
    
    ReactDOM.unstable_renderSubtreeIntoContainer(
      this,
      (<Modal />),
      container,
      function () {
          /* callback */
      }
    )
}

Untuk penggunaan khusus, sila rujuk penggunaan dalam react-portal
atau penggunaan dalam reka bentuk semut Ant Financial

Tandatangan dan definisi boleh didapati di sini, dengan ulasan padanya

Sebenarnya, saya tidak faham sepenuhnya penggunaan antara muka ini... Saya tidak pasti ia betul anda harus membaca sendiri kod dalam pautan di atas