React的ref是怎样调用其他元素？(react ref用法)
一、什么是 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 ({ }} />);
}
}
class SetTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
componentDidMount() {
this.textInput.current.setTextInput("测试");
}
render() {
return ();
}
}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 ();
}
}三、函数组件中使用ref
1、无法使用 ref 属性
// 错误案例：
function MyFunctionComponent() {
return;
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
render() {
// This will *not* work!
return ();
}
}2、useRef
函数组件使用 useRef 来访问React元素。
function CustomTextInput(props) {
const textInput = React.useRef(null);
function handleClick() {
textInput.current.focus();
}
return ();
}3、forwardRef
通过 forwardRef 可以转发ref，访问组件的子元素。
const FancyButton = React.forwardRef((props, ref) => ({props.children}));
// 可以直接获取 DOM button 的 ref：
const ref = React.createRef();Click me!;四、其他方式访问元素
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 (this.textInput = element} />
);
}
}2、通过 props 属性
function CustomTextInput(props) {
return ();
}
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 (this.inputElement = el} />);
}
}五、通过HTML直接查看上面示例效果的方式
增加上面代码到脚本标签下，然后复制到 index.html ，用浏览器打开即可看到效果。