【一】使用ref必须用在【类型式的组件】才起作用,用在【函数式的组件】是无效的。
下面这个例子用在了【函数式的组件】上,所以是无效的:
function MyFunctionalComponent() { return <input />; } class Parent extends React.Component { render() { // This will *not* work! return ( <MyFunctionalComponent ref={(input) => { this.textInput = input; }} /> ); } }
下面这个例子是正确的用法:
class AutoFocusTextInput extends React.Component { componentDidMount() { this.textInput.focusTextInput(); } render() { return ( <CustomTextInput ref={(input) => { this.textInput = input; }} /> ); } }
class CustomTextInput extends React.Component { // ... }
【二】ref用在普通的 DOM 元素 上时,DOM 元素 作为ref的参数进行使用;
ref用在 组件 上时,组件 作为ref的参数进行使用;