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

資訊專欄INFORMATION COLUMN

React的ref是啥?強力一波

MorePainMoreGain / 1055人閱讀

摘要:原理就是父組件把的回調函數當做傳遞給子組件,然后子組件把這個函數和當前的綁定,最終的結果是父組件的存儲的是子組件中的。

React ref

理解:通過指定ref獲得你想操作的元素,然后進行修改

string 使用方法
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
ref作為回調函數的方式去使用
class Input extends Component {
    constructor(props){
        super(props);
    }
    
    focus = () => {
        this.textInput.focus();
    }
    
    render(){
        return (
            
{ this.textInput = input }} />
) } }
input參數是哪來的
回調函數將接收當前的DOM元素作為參數,然后存儲一個指向這個DOM元素的引用。那么在示例代碼中,我們已經把input元素存儲在了this.textInput中,在focus函數中直接使用原生DOM API實現focus聚焦。
回調函數什么時候被調用
答案是當組件掛載后和卸載后,以及ref屬性本身發生變化時,回調函數就會被調用。
不能在無狀態組件中使用ref
原因很簡單,因為ref引用的是組件的實例,而無狀態組件準確的說是個函數組件(Functional Component),沒有實例。

理解:class組件-對象組件-有實例 無狀態組件-函數組件-無實例

上代碼:

function MyFunctionalComponent() {
    return ;
}

class Parent extends React.Component {
    render() {
        return (
             { this.textInput = input; }} />
        );
    }
}
父組件的ref回調函數可以使用子組件的DOM。
function CustomTextInput(props) {
    return (
        
); } class Parent extends React.Component { render() { return ( this.inputElement = el} /> ); } }

原理就是父組件把ref的回調函數當做inputRefprops傳遞給子組件,然后子組件把這個函數和當前的DOM綁定,最終的結果是父組件的this.inputElement存儲的DOM是子組件中的input。
同樣的道理,如果A組件是B組件的父組件,B組件是C組件的父組件,那么可用上面的方法,讓A組件拿到C組件的DOM。

理念

Facebook非常不推薦會打破組件的封裝性的做法,多級調用確實不雅,需要考慮其他更好的方案去優化

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/110233.html

相關文章

  • 受控組件和非受控組件,強力一波

    摘要:受控組件其值由控制的輸入表單元素稱為受控組件。如果讓表單數據由處理時,替代方案為使用非受控組件。使用非受控組件時,通常你希望可以為其指定初始值,但不再控制后續更新。 受控組件 其值由React控制的輸入表單元素稱為受控組件。 class NameForm extends React.Component { constructor(props) { super(props);...

    FrancisSoung 評論0 收藏0
  • ES6:promise是啥強力一波

    摘要:了解記錄學習到的知識點,學習阮一峰大神書的一些心得回調地獄感受一下嚇人不。。。。。改良一波舒服多了有沒有是一種異步的解決方案,比傳統的回調更合理且強大。簡單來說就是一個容器,里面存在著某個未來發生的事件通常是一個異步操作的結果。 title: ES6:了解promisesubtitle: 記錄學習到的知識點,學習阮一峰大神es6書的一些心得 回調地獄感受一下: let...

    adam1q84 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<