在 React16 新版本中，新引入了 React.createRef 與 React.forwardRef 兩個 API，有計劃移除老的 string ref，使 ref 的使用更加便捷與明確。如果你的應用已經升級到 React16.3+ 版本，那就放心大膽使用 React.createRef 吧，如果暫時沒有的話，建議使用 callback ref 來代替 string ref。

string ref 使用

class MyComponent extends React.Component {componentDidMount() {this.refs.myRef.focus();}render() {return <input ref="myRef" />;} }

callback ref 使用

class MyComponent extends React.Component {componentDidMount() {this.myRef.focus();}render() {return <input ref={(ele) => {this.myRef = ele;}} />;} }

React.createRef 使用

class MyComponent extends React.Component {constructor(props) {super(props);this.myRef = React.createRef();}componentDidMount() {this.myRef.current.focus();}render() {return <input ref={this.myRef} />;} }

總結

以上是生活随笔為你收集整理的react16中ref的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。