国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React父組件調(diào)用子組件中的方法實(shí)例詳解

3403771864 / 2734人閱讀

　　本文主要講述ref 的應(yīng)用僅為父組件調(diào)用子組件場(chǎng)景下的應(yīng)用方式1

　　Class組件

　　1. 自定義事件

　　 Parent.js

　　import React, { Component } from 'react';
　　import Child from './Child';
　　class Parent extends Component {
　　componentDidMount () {
　　console.log(this.childRef)
　　}
　　handleChildEvent = (ref) => {
　　// 將子組件的實(shí)例存到 this.childRef 中, 這樣整個(gè)父組件就能拿到
　　this.childRef = ref
　　}
　　//按鈕事件處理
　　handleClick = () => {
　　// 通過(guò)子組件的實(shí)例調(diào)用組組件中的方法
　　this.childRef.sendMessage()
　　}
　　render () {
　　return (
　　<>
　　<Child
　　onChildEvent={this.handleChildEvent}
　　/>
　　<button onClick={this.handleClick}>Trigger Child Event</button>
　　</>
　　);
　　}
　　}
　　export default Parent;

　　Child.js

　　import React, { Component } from 'react';
　　class Child extends Component {
　　//子組件完成掛載時(shí), 將子組件的方法 this 作為參數(shù)傳到父組件的函數(shù)中
　　componentDidMount () {
　　// 在子組件中調(diào)用父組件的方法,并把當(dāng)前的實(shí)例傳進(jìn)去
　　this.props.onChildEvent(this)
　　}
　　// 子組件的方法, 在父組件中觸發(fā)
　　sendMessage = () => {
　　console.log('sending message')
　　}
　　render () {
　　return ( <div>Child</div> );
　　}
　　}
　　export default Child;
　　2. 使用 React.createRef()

　　ParentCmp.js

　　import React, { Component } from 'react';
　　import ChildCmp from './ChildCmp';
　　export default class ParentCmp extends Component {
　　constructor(props) {
　　super(props)
　　// 創(chuàng)建Ref
　　this.childRef = React.createRef()
　　}
　　// 按鈕事件
　　handleClick = () => {
　　// 直接通過(guò) this.childRef.current 拿到子組件實(shí)例
　　this.childRef.current.sendMessage()
　　}
　　render () {
　　return (
　　<>
　　<ChildCmp ref={this.childRef} />
　　<button onClick={this.handleClick}>Trigger Child Event</button>
　　</>
　　);
　　}
　　}

　　而子組件就是一個(gè)普通的組件

　　ChildCmp.js

　　import React, { Component } from 'react';
　　export default class ChildCmp extends Component {
　　sendMessage = () => {
　　console.log('sending message')
　　}
　　render () {
　　return 'Child';
　　}
　　}

　　3. 使用回調(diào)Refs

　　回調(diào) Refs 是另一種設(shè)置 Ref 的方式，可以控制 refs 被設(shè)置和解除的時(shí)間。

　　此時(shí)，需要傳遞一個(gè)函數(shù)，不同于傳遞 createRef() 創(chuàng)建的 ref 屬性。

　　 current也不是訪問(wèn) Ref 必需。

　　ParentCmp.js

　　import React, { Component } from 'react';
　　import ChildCmp from './ChildCmp';
　　export default class ParentCmp extends Component {
　　constructor(props) {
　　super(props)
　　// 創(chuàng)建 Ref，不通過(guò) React.createRef()
　　this.childRef = null
　　}
　　// 設(shè)置 Ref
　　setChildRef = (ref) => {
　　this.childRef = ref
　　}
　　// 按鈕事件
　　handleClick = () => {
　　// 直接通過(guò) this.childRef 拿到子組件實(shí)例
　　this.childRef.sendMessage(`Trigger Child Event from Parent`)
　　}
　　render () {
　　return (
　　<>
　　<ChildCmp ref={this.setChildRef} />
　　<button onClick={this.handleClick}>Trigger Child Event</button>
　　</>
　　);
　　}
　　}

　　而子組件還是一個(gè)普通的組件

　　ChildCmp.js

　　import { Component } from 'react';
　　export default class ChildCmp extends Component {
　　sendMessage = (message) => {
　　console.log('sending message:', message)
　　}
　　render () {
　　return 'Child';
　　}
　　}

　　【注】對(duì)比自定義事件方式，回調(diào) Refs 更像是精簡(jiǎn)的自定義事件方式：

　　在自定義事件名稱變成了 ref之后，子組件內(nèi)無(wú)需手動(dòng)綁定。

　　Function組件

　　在普通默認(rèn)情況下，無(wú)法在函數(shù)組件上使用 ref 屬性，主要是沒(méi)有實(shí)例。上述兩種方式都行不通。

　　解決辦法就是使用 forwardRef 和 useImperativeHandle。

　　不過(guò)在函數(shù)的內(nèi)部是可以使用 useRef 鉤子來(lái)獲取組件內(nèi)的 DOM 元素。

　　Parent.js

　　import React, { useRef } from 'react';
　　import Child from './Child';
　　const Parent = () => {
　　// 通過(guò) Hooks 創(chuàng)建 Ref
　　const childRef = useRef(null)
　　const handleClick = () => {
　　childRef.current.sendMessage()
　　}
　　return (
　　<>
　　<Child
　　ref={childRef}
　　/>
　　<button onClick={handleClick}>Trigger Child Event</button>
　　</>
　　);
　　}
　　export default Parent;

　　Child.js

　　import React, { forwardRef, useImperativeHandle } from 'react';
　　const Child = forwardRef((props, ref) => {
　　//將子組件的方法 暴露給父組件
　　useImperativeHandle(ref, () => ({
　　sendMessage
　　}))
　　const sendMessage = () => {
　　console.log('sending message')
　　}
　　return ( <div>Child</div> );
　　})
　　export default Child;

　　注：

　　上面的例子中只是簡(jiǎn)單地演示了父子組件之間的方法調(diào)用，當(dāng)然實(shí)際情況中子組件中可以也會(huì)有自己的 ref 指向自己內(nèi)部的 DOM 元素，不過(guò)這些原理都是一樣的。

　　補(bǔ)充：子組件調(diào)用父組件方法

　　子組件中調(diào)用父組件的setId方法

　　父組件

　　<NavBarX
　　item={item}
　　current={current}
　　getBatchDetails={(id) => this.getBatchDetails(0, id)}
　　setId={(id, callback) => this.setState({ id }, callback)}
　　onRef={this.onNavBarXRef}
　　/>

　　子組件

　　this.props.setId(prePageId, () => {
　　getBatchDetails(prePageId)
　　})

       上述就是全部?jī)?nèi)容，后續(xù)請(qǐng)大家多多關(guān)注！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/127716.html

相關(guān)文章

  • 5、React組件事件詳解

    摘要：組件事件響應(yīng)在構(gòu)建虛擬的同時(shí)，還構(gòu)建了自己的事件系統(tǒng)且所有事件對(duì)象和規(guī)范保持一致。的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比，主要增加了兩個(gè)特性事件代理和事件自動(dòng)綁定。 React組件事件響應(yīng) React在構(gòu)建虛擬DOM的同時(shí)，還構(gòu)建了自己的事件系統(tǒng)；且所有事件對(duì)象和W3C規(guī)范保持一致。 React的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比，主要增加了兩個(gè)特性：事件代理、和事件自動(dòng)綁定。 1、事件代理 ...

    Ververica 評(píng)論0 收藏0

  • 簡(jiǎn)述 React 組件生命周期

    摘要：這個(gè)階段只有一個(gè)方法，該方法在整個(gè)生命周期內(nèi)調(diào)用且僅調(diào)用一次。在這里進(jìn)行一些相關(guān)的銷毀操作，比如撤銷定時(shí)器，事件監(jiān)聽(tīng)等等。 詳解 React 生命周期 整個(gè) React 生命周期有3個(gè)階段：創(chuàng)建、更新、卸載，每個(gè)階段有對(duì)應(yīng)的工作和方法，我們可以看下面這個(gè)經(jīng)典的圖研究一下： showImg(https://segmentfault.com/img/remote/1460000016330...

    qpal 評(píng)論0 收藏0

  • React入門看這篇就夠了

    摘要：背景介紹入門實(shí)例教程起源于的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有框架，都不滿意，就決定自己寫(xiě)一套，用來(lái)架設(shè)的網(wǎng)站。做出來(lái)以后，發(fā)現(xiàn)這套東西很好用，就在年月開(kāi)源了。也就是說(shuō)，通過(guò)鉤子函 react - JSX React 背景介紹 React 入門實(shí)例教程 React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架，都不滿意，就決定自己寫(xiě)一套...

    luckyw 評(píng)論0 收藏0

  • React的Refs方法獲取DOM實(shí)例 和 訪問(wèn)子組件方法及屬性

    摘要：綁定屬性調(diào)用的時(shí)候使用調(diào)用子組件方法這是一個(gè)很神奇的方法，它可以調(diào)用子組件的方法以及屬性。建立組件建立子組件，并在子組件實(shí)現(xiàn)一個(gè)方法，如，這個(gè)方法實(shí)現(xiàn)變更當(dāng)前組件上面的文本，提供這樣一個(gè)測(cè)試用例。輸入框獲取焦點(diǎn)完整實(shí)例點(diǎn)我輸入框獲取焦點(diǎn) React 支持一種非常特殊的屬性 Ref ，你可以用來(lái)綁定到 render() 輸出的任何組件上。 ref : 綁定屬性 refs : 調(diào)用的時(shí)候...

    geekzhou 評(píng)論0 收藏0

  • React

    摘要：基礎(chǔ)創(chuàng)建虛擬參數(shù)元素名稱，例如參數(shù)屬性集合，例如，，，從參數(shù)開(kāi)始，表示該元素的子元素，通常這些元素通過(guò)創(chuàng)建，文本文件可以直接插入嘻嘻哈哈這是渲染器，將元素渲染到頁(yè)面中。 React簡(jiǎn)介 FeceBook開(kāi)源的一套框架，專注于MVC的視圖V模塊。實(shí)質(zhì)是對(duì)V視圖的一種實(shí)現(xiàn)。 React框架的設(shè)計(jì)沒(méi)有過(guò)分依賴于某個(gè)環(huán)境，它自建一套環(huán)境，就是virtual DOM（虛擬DOM）。 提供基礎(chǔ)AP...

    hlcc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<