第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無法從其父 React JS 獲取子組件引用對象

無法從其父 React JS 獲取子組件引用對象

喵喵時光機 2022-07-21 22:20:02
我想從子級向父級引用一個<div>和一個組件。 所以我編寫如下代碼:<span>class Parent extends Component {    childRef = React.createRef()    componentDidMount(){      const childRef1 = this.childRef.current.innerRef1      const childRef2 = this.childRef.current.innerRef2           //... compute with the references childRef1 and childRef2  }   render(){    return(      <ChildComponent ref={this.childRef} />    )  }}在孩子里面我得到了類似的東西: class ChildComponent extends Component {    innerRef1 = React.createRef()    innerRef2 = React.createRef()       render(){    return(      <div ref={this.innerRef1}>         <span ref={this.innerRef2}></span>      </div>    )  }}我想獲取這些標簽的屬性。getBoundingClientRect()、scrollTop 等;但是來自 Parent 組件,因為我無法從 ChildComponent componentDidMount 計算它,因為這些組件尚未呈現(xiàn)。這是我當前從瀏覽器控制臺獲得的結(jié)果:如您所見,它current object向我顯示了一個null值,但在里面您可以看到我想要獲得的所有屬性。
查看完整描述

1 回答

?
浮云間

TA貢獻1829條經(jīng)驗 獲得超4個贊

因為您想獲取這些標簽的屬性,例如 getBoundingClientRect()。我提供了使用 ref 調(diào)用 getBoundingClientRect() 的示例,并將字符串設置為 span 的 innerText。請檢查一下。


父組件示例


import React from "react";

import ChildComponentExample from "./ChildComponentExample";


export default class ParentComponentExample extends React.Component {

    childRef = React.createRef();


    componentDidMount() {

        const childRef1 = this.childRef.current.innerRef1;

        const childRef2 = this.childRef.current.innerRef2;


        console.log(childRef2, 'childRef2');

        childRef2.current.innerText = 'This is SPAN';

        const rect = childRef1.current.getBoundingClientRect();

        console.log(rect, 'rect');

    }


    render() {

        return (

            <ChildComponentExample ref={this.childRef}/>

        )

    }

}

子組件示例


import React from "react";


export default class ChildComponentExample extends React.Component {

    innerRef1 = React.createRef();

    innerRef2 = React.createRef();


    render() {

        return (

            <div ref={this.innerRef1}>

                <span ref={this.innerRef2}/>

            </div>

        )

    }

}


查看完整回答
反對 回復 2022-07-21
  • 1 回答
  • 0 關(guān)注
  • 109 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號