Rumah hujung hadapan web tutorial js react中的portal是做什么的

react中的portal是做什么的

Nov 27, 2020 am 10:02 AM
react

react中的portal可以将子组件渲染到非父组件的子树下,同时父组件仍能对子组件做出反应;使用方法如【ReactDOM.createPortal(this.props.children, this.el);】。

react中的portal是做什么的

本文环境:windows10、react16,本文适用于所有品牌的电脑。

作用:

将子组件渲染到非父组件的子树下,同时父组件仍能对子组件做出反应,我们甚至不用做过多的dom处理。

(学习视频分享:react视频教程

举例:

现在有两个组件,Dog和Cat,我们想让Dog的子组件Puppy放到Cat里,当欺负Puppy的时候,即使相隔千里Dog也能感受到。

代码实现:

先获取页面中Dog窝和Cat窝

1

2

const dogRoot = document.getElementById("dog-house");

const catRoot = document.getElementById("cat-house");

Salin selepas log masuk

创建一个Puppy组件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

class Puppy extends React.Component {

  constructor(props) {

    super(props);

    // 创建一个容器标签

    this.el = document.createElement("div");

  }

 

  componentDidMount() {

    // 把容器标签挂到 catRoot DOM下

    catRoot.append(this.el);

  }

 

  componentWillUnmount() {

    catRoot.removeChild(this.el);

  }

 

  render() {

    // 利用portal把Puppy的内容放到容器里

    return ReactDOM.createPortal(this.props.children, this.el);

  }

}

Salin selepas log masuk

创建Dog组件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

class Dog extends React.Component {

  constructor(props) {

    super(props);

    this.state = { bark: 0 };

    this.handleClick = this.handleClick.bind(this);

  }

 

  handleClick() {

    // 点击的时候 bark + 1

    this.setState((state) => ({

      bark: state.bark + 1,

    }));

  }

 

  render() {

    // 看上去Puppy组件是在Dog挂在Dog组件里,但其实它被挂载在其它地方

    return (

      <div onClick={this.handleClick}>

        <p>The number of times a big dog barks: {this.state.bark}</p>

        <h3>Dog: </h3>

        <p>I can&#39;t see my children, but I can feel them</p>

        <Puppy>

          <Bully target={&#39;Puppy&#39;}/>

        </Puppy>

        <Bully target={&#39;Dog&#39;}/>

      </div>

    );

  }

}

 

ReactDOM.render(<Dog />, dogRoot);

Salin selepas log masuk

再创建一个代替欺负Puppy的按钮组件

1

2

3

4

5

6

7

function Bully(props) {

  return (

    <>

      <button>Bully the {props.target}</button>

    </>

  );

}

Salin selepas log masuk

相关推荐:js教程

Atas ialah kandungan terperinci react中的portal是做什么的. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara membina apl sembang masa nyata dengan React dan WebSocket Cara membina apl sembang masa nyata dengan React dan WebSocket Sep 26, 2023 pm 07:46 PM

Cara membina apl sembang masa nyata dengan React dan WebSocket

Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang Sep 28, 2023 am 10:48 AM

Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang

Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask Sep 27, 2023 am 11:09 AM

Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask

Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ Sep 28, 2023 pm 08:24 PM

Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ

Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery Sep 26, 2023 pm 06:12 PM

Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery

Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat Sep 26, 2023 pm 02:25 PM

Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat

Panduan Pengguna Penghala React: Cara melaksanakan kawalan penghalaan bahagian hadapan Panduan Pengguna Penghala React: Cara melaksanakan kawalan penghalaan bahagian hadapan Sep 29, 2023 pm 05:45 PM

Panduan Pengguna Penghala React: Cara melaksanakan kawalan penghalaan bahagian hadapan

Panduan reka bentuk responsif bertindak balas: Cara mencapai kesan susun atur bahagian hadapan yang adaptif Panduan reka bentuk responsif bertindak balas: Cara mencapai kesan susun atur bahagian hadapan yang adaptif Sep 26, 2023 am 11:34 AM

Panduan reka bentuk responsif bertindak balas: Cara mencapai kesan susun atur bahagian hadapan yang adaptif

See all articles