將子節點的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" /></>)}
}