共计 3101 个字符，预计需要花费 8 分钟才能阅读完成。
一、什么是 ref
ref 能够了解为指向 React 元素的变量，不便其余组件拜访这个 React 元素。
二、class 组件应用 ref
1、createRef : class 组件
通过 ref，拜访 class 组件。
class CustomTextInput extends React.Component {constructor(props) {super(props);
this.state = {text: ""};
}
setTextInput(text) {this.setState({ text: text});
}
render() {return (<input type="text" value={this.state.text} onChange={() => {}} />);
}
}
class SetTextInput extends React.Component {constructor(props) {super(props);
this.textInput = React.createRef();}
componentDidMount() {this.textInput.current.setTextInput("测试");
}
render() {return (<CustomTextInput ref={this.textInput} />);
}
}2、createRef : dom 元素
通过 ref，拜访 React 元素。
// 应用 ref 调用 input 元素的 focus 办法
class CustomTextInput extends React.Component {constructor(props) {super(props);
// 1、创立 ref
this.textInput = React.createRef();}
// 3、应用 ref 拜访元素
componentDidMount() {this.textInput.current.focus();
}
// 2、将元素的 ref 属性 与 创立的 ref 进行关联
render() {
return (<input type="text" ref={this.textInput} />
);
}
}三、函数组件中应用 ref
1、无奈应用 ref 属性
// 谬误案例：function MyFunctionComponent() {return <input />;}
class Parent extends React.Component {constructor(props) {super(props);
this.textInput = React.createRef();}
render() {
// This will *not* work!
return (<MyFunctionComponent ref={this.textInput} />
);
}
}2、useRef
函数组件应用 useRef 来拜访 React 元素。
function CustomTextInput(props) {const textInput = React.useRef(null);
function handleClick() {textInput.current.focus();
}
return (
<div>
<input
type="text"
ref={textInput} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}3、forwardRef
通过 forwardRef 能够转发 ref，拜访组件的子元素。
const FancyButton = React.forwardRef((props, ref) => (<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// 能够间接获取 DOM button 的 ref：const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;四、其余形式拜访元素
1、通过回调
class CustomTextInput extends React.Component {constructor(props) {super(props);
this.textInput = null;
this.focusTextInput = () => {if (this.textInput) this.textInput.focus();};
}
componentDidMount() {this.focusTextInput();
}
render() {
return (<input type="text" ref={element => this.textInput = element} />
);
}
}2、通过 props 属性
function CustomTextInput(props) {return (<input ref={props.inputRef} />);
}
class Parent extends React.Component {constructor(props) {super(props);
this.inputElement = null;
this.focusTextInput = () => {if (this.inputElement) this.inputElement.focus();};
}
componentDidMount() {this.focusTextInput();
}
render() {return (<CustomTextInput inputRef={el => this.inputElement = el} />);
}
}五、通过 HTML 间接查看下面示例成果的形式
减少下面代码到脚本标签下，而后复制到 index.html，用浏览器关上即可看到成果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>DOM 元素应用 ref</title>
<!-- 第一步：加载开发版本的 React -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 部署时，请用上面链接代替下面 -->
<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->
<!-- 第二步：加载开发版本的 babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 这里减少代码
ReactDOM.render(<MyCompent />, document.getElementById('root'));
</script>
</body>
</html>六、参考链接
- React 的 ref 是怎么调用其余元素？
正文完
