呼叫方法:1、類別元件中的呼叫可以利用React.createRef()、ref的函數式宣告或props自訂onRef屬性來實作;2、函式元件、Hook元件中的呼叫可以利用useImperativeHandle或forwardRef拋出子元件ref來實作。
本教學操作環境:Windows7系統、react18版、Dell G3電腦。
在React中,我們常在子元件中呼叫父元件的方法,一般用props回呼即可。但是有時候也需要在父元件中呼叫子元件的方法,透過這種方法實現高內聚。有多種方法,請按需服用。
優點:簡單易懂,用ref指向。
缺點:使用了HOC的子元件不可用,無法指向真是子元件
例如一些常用的寫法,mobx的@observer包裹的子元件就不適用此方法。
import React, { Component } from 'react'; class Sub extends Component { callback() { console.log('执行回调'); } render() { return <div>子组件</div>; } } class Super extends Component { constructor(props) { super(props); this.sub = React.createRef(); } handleOnClick() { this.sub.callback(); } render() { return ( <div> <Sub ref={this.sub}></Sub> </div> ); } }
使用方法和上述的一樣,就是定義ref的方式不同。
... <Sub ref={ref => this.sub = ref}></Sub> ...
import React, { Component } from 'react'; import { observer } from 'mobx-react' @observer class Sub extends Component { componentDidMount(){ // 将子组件指向父组件的变量 this.props.onRef && this.props.onRef(this); } callback(){ console.log("执行我") } render(){ return (<div>子组件</div>); } } class Super extends Component { handleOnClick(){ // 可以调用子组件方法 this.Sub.callback(); } render(){ return ( <div> <div onClick={this.handleOnClick}>click</div> <Sub onRef={ node => this.Sub = node }></Sub> </div>) } }
import React, { useImperativeHandle } from 'react'; import { observer } from 'mobx-react' const Parent = () => { let ChildRef = React.createRef(); function handleOnClick() { ChildRef.current.func(); } return ( <div> <button onClick={handleOnClick}>click</button> <Child onRef={ChildRef} /> </div> ); }; const Child = observer(props => { //用useImperativeHandle暴露一些外部ref能访问的属性 useImperativeHandle(props.onRef, () => { // 需要将暴露的接口返回出去 return { func: func, }; }); function func() { console.log('执行我'); } return <div>子组件</div>; }); export default Parent;
使用forwardRef拋出子元件的ref
這個方法其實更適合自訂HOC。但問題是,withRouter、connect、Form.create等方法並不能拋出ref,假如Child本身就需要嵌套這些方法,那基本上就不能混著用了。 forwardRef本身也是用來拋出子元素,如input等原生元素的ref的,並不適合做組件ref拋出,因為組件的使用場景太複雜了。
import React, { useRef, useImperativeHandle } from 'react'; import ReactDOM from 'react-dom'; import { observer } from 'mobx-react' const FancyInput = React.forwardRef((props, ref) => { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); } })); return <input ref={inputRef} type="text" /> }); const Sub = observer(FancyInput) const App = props => { const fancyInputRef = useRef(); return ( <div> <FancyInput ref={fancyInputRef} /> <button onClick={() => fancyInputRef.current.focus()} >父组件调用子组件的 focus</button> </div> ) } export default App;
父元件調子元件函數有兩種情況
以上是React父元件怎麼呼叫子元件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!