reactjs中REF和INNERREF的区别

Question

我正在使用两个类组件，其中我有一个从父组件调用的方法。出于这个原因，我必须使用 React.CreateRef() 创建两个引用。但问题是一个组件允许我使用 ref 属性和 onther innerRef 属性。所以我想知道不同之处。

class X extends Component {
  constructor(props) {
    super(props);

    this.xRef = React.createRef();
    this.yRef = React.createRef();
  }

render (){
 return (
        <Xcomponent
            classes={classes}
            user={user}
            ref={this.xRef }
         />
        <Ycomponent
            classes={classes}
            user={user}
            innerRef={this.xRef }
         />
)
}
}

Answer 1

innerRef是组件实例属性，而ref是组件实例属性：

当 ref 属性是回调函数时，该函数接收底层 DOM 元素或类实例。

// Access reference within the parent component: this.xRef.current
// Access property within the component: this.props.innerRef.current
<Ycomponent ref={this.xRef} innerRef={this.xRef} />


// coolRef is an ordinary component property, you can name it as you like
<Ycomponent ref={this.xRef} coolRef={this.xRef} />
// access with this.props.coolRef.current within the component.

总之，自定义组件定义了开发人员传递引用的Ycomponent属性。innerRef

有关更多信息，请参阅相关问题：到底为什么我们需要 React.forwardRef？