reactjs - 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是 component instance property , 而 ref是 component instance attribute :

When the ref attribute is a callback function, the function receives the underlying DOM element or class instance.

// 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供开发人员使用它传递引用。
有关更多信息，请参阅相关问题: Why, exactly, do we need React.forwardRef?