一、什么是 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是怎么调用其余元素？