export default class Demo01 extends React.Component {
render () {
return
}
}
当项目中同时存在相同 ref 引用时，控制台会收到以下错误：
大致意思就是说 ref 不能存在相同的。不管是不是同一个组件，都不能使用相同的引用，和id 相似，必须为唯一值。 详细的解释去这里
官网提供了useRef 和 createRef 来解决ref 引用重复的问题。 并且明确的指出不建议使用 字符串的ref, 即使它在项目中是唯一引用。
现在我们来吧代码改变一下。
export default class Demo01 extends React.Component {
constructor(props) {
this.threeStage = useRef();
}
render () {
return
}
}
如果你像这样使用，那恭喜你，又将获得一段大红字：
大致意思为: 类组件不能使用 useRef, useRef 只能 function组件和自定义Hook 才能使用。
我们换为React.createRef() 则正常了， 有一点要注意。 React.createRef() 请放 constructor 中初始化。不然componentDidMount 使用时会出现错误。
export default class Demo01 extends React.Component {
constructor(props) {
this.threeStage = React.createRef();
}
componentDidMount () {
// 注：获取实例时，必须通过 current 获取
this.threeStage.current.innerHtml = "成功";
}
render () {
return
}
}
由上总结：
- React ref 引用必须为唯一值。
- React ref 不建议使用字符串为引用。即使是唯一的。
- useRef() 不可以在 class 组件中使用，class 必须使用 React.createRef();