react如何將元件內部的方法暴露給外部

2021-08-20 23:40:57 字數 1121 閱讀 5318

最近在專案中遇到乙個問題,就是需要在類的外部呼叫操作類內部的方法。

舉個例子,我有乙個toast元件,在外部需要呼叫它的show方法來控制他的顯隱狀態。

之前我的寫法是寫乙個靜態類方法,然後在constructor中去修改它的作用域,**如下:

// @flow

import react from 'react';

import './style.less';

type props=

export default

class toast extends react.component ) , () => );

}, this.props.time);

});}

constructor(props:props) ;

toast.show = toast.show.bind(this);

}componentwillunmount() );

clearinterval(this.timer);

}render() = this.state;

return (

div>}

div>);}

}

後來發現bug頻出,只有在重新重新整理的時候show方法中呼叫this.setstate()才有效,而在多個頁面使用這個元件會出現很多問題,都是由於作用域繫結錯誤的原因。

最後審視了下**,應該是將靜態的show方法指向內部的show方法,而不是把靜態的show方法的上下文繫結到這個類上。

調整**如下:

// ...

constructor(props:props) ;

toast.show = this.show.bind(this); // 最重要的一步!!

}show() , () => );

}, this.props.time);

});}

// ....

還是因為自己對bind理解不深刻的原因,看下mdn–bind

如何將iview封裝成自己的元件庫

因為專案ui風格改版,iview提供的的定製主題滿足不了需求,有些元件需要更改結構,所以需要對iview進行二次開發,封裝成公司內部的元件庫。從github clone iview源 看一下它的各種配置檔案尤其是package.json和.babelrc,與本地專案作比較,適當合併一下,之後刪除不必...

如何將封裝好的元件發布到npm上

今天我們向大佬學習,走一波大佬的路 簡單的目錄結構 通過npm init命令,建立package檔案 name vue component button version 0.0.2 description vue component button demo main dist index.js sc...

C 如何將方法作為引數傳遞

如何實現將方法作為引數傳遞 示例是控制台程式,如下 class program static int a 2 static int b 3 static int c 0 static int x 4 宣告乙個方法型,關鍵字就是delegate,有引數就帶上引數 public delegate voi...