React的ref是怎样调用其他元素（） react.js

一、什么是 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 【React的ref是怎样调用其他元素（）】通过 forwardRef 可以转发ref，访问组件的子元素。

const FancyButton = React.forwardRef((props, ref) => ( )); // 可以直接获取 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 ，用浏览器打开即可看到效果。