將子節點的ref暴露給父節點

• 16.3以上 Refs轉發，將ref自動通過組件傳遞給子組件

1. 在父組件創建ref對象 2. 給子組件賦值ref 3. 通過React.forward向子組件轉發ref屬性 4. 父組件的ref對象指向子組件dom 5. ref參數只有在 React.forwardRef 組件內定義時可接受 const MyInput = React.forwardRef((props, ref) =><input type="text" placeholder={props.placeholder} ref={ref} /> ) class App extends React.Component {constructor(props) {super(props)this.refInApp = React.createRef()}componentDidMount() {console.log('【APP】componentDidMount', this.refInApp)}inputOperate = () => {const oInput = this.refInApp.currentoInput.focus()}render() {return (<><MyInput ref={this.refInApp} placeholder="請輸入" /><button onClick={this.inputOperate}>聚焦</button></>)} } ReactDOM.render(<App />,document.getElementById('app') )

在高階組件中轉發

• 匿名改具名
  

class MyInput extends React.Component {render() {return (<input type="text" />)} } function InputHoc(WrapperComponent) {class Input extends React.Component {render() {// 容器組件內部獲取ref屬性const { forwardedRef, ...props } = this.propsreturn (// 將forwardedRef傳遞給參數組件<WrapperComponent ref={forwardedRef} {...props} />)}}// return React.forwardRef((props, ref) => {// return <Input {...props} forwardedRef={ref} />// })// 向子組件傳遞ref function forwardRef(props, ref) {return <Input {...props} forwardedRef={ref} />}forwardRef.displayName = 'Input-' + WrapperComponent.namereturn React.forwardRef(forwardRef)} const MyInputHoc = InputHoc(MyInput) class App extends React.Component {constructor(props) {super(props)this.refInApp = React.createRef()}componentDidMount() {// 拿到高階組件包裹的MyInput的實例console.log('【APP】componentDidMount', this.refInApp)}inputOperate = () => {const oInput = this.refInApp.currentoInput.focus()}render() {return (<>{/* 用ref接收轉發的ref */}<MyInputHoc ref={this.refInApp} placeholder="請輸入" /><button onClick={this.inputOperate}>聚焦</button></>)} } ReactDOM.render(<App />,document.getElementById('app') )

16.2及以下 Refs轉發

1. props傳遞

class MyInput extends React.Component {render() {return (<input type="text" ref={this.props.inputRef} placeholder={this.props.placeholder} />)} } class App extends React.Component {constructor(props) {super(props)this.refInApp = React.createRef()}componentDidMount() {console.log('【APP】componentDidMount', this.refInApp)}inputOperate = () => {const oInput = this.refInApp.currentoInput.focus()}render() {return (<>{/* 用ref接收轉發的ref */}<MyInput inputRef={this.refInApp} placeholder="請輸入" /><button onClick={this.inputOperate}>聚焦</button></>)} } ReactDOM.render(<App />,document.getElementById('app') )

2. 回調

class MyInput2 extends React.Component {constructor(props) {super(props)this.innerInput = null}setMyInput = (el) => {// 這里就是dom，沒有包裹在對象里console.log('回調的方式el', el)this.innerInput = el;}inputOperate = () => {this.innerInput.value = ''this.innerInput.focus()}render() {return (<><input type="text" ref={this.setMyInput} /><button onClick={this.inputOperate}>聚焦(回調方式)</button></>)} }

3. 在父組件回調

class MyInput3 extends React.Component {render() {return (<input type="text" ref={this.props.inputRef} />)} } class App extends React.Component {componentDidMount() {// 在父組件獲取到子組件的dom，不是包裹在對象里的console.log('【APP】componentDidMount', this.oInput)}inputOperate2 = () => {this.oInput.focus()}render() {return (<><MyInput3 inputRef={el => this.oInput = el} /><button onClick={this.inputOperate2}>聚焦(回調2，定義在父組件) </button></>)} }

4. 字符串形式 已廢棄

• 依賴組件實例下面的refs集合里的ref
• 需要React保持追蹤當前正在渲染的組件（沒有加載完成，this沒法確定）
• 可能會比較慢
• 不能在render中工作
• 不能組合，只能有一個ref屬性

class App extends React.Component {componentDidMount() {console.log('【APP】componentDidMount字符串',this.refs.inputRefText)}render() {return (<><input type="text" ref="inputRefText" /></>)} }

總結

以上是生活随笔為你收集整理的25 Refs转发机制与在高阶组件中的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。