Question

我最近注意到在ReactJS中无法将ref作为属性传递给组件。

这是我的代码：

class A extends React.Component{
    render(){
        return <B
            ref={ref=>this.bRef = ref} 
        />
    }
}

class B extends React.Component{
    render(){
        console.log(this.props.ref) //=>undefined
        return <div
            {...this.props}
        />
    }
}

this.bRef在A中未定义。请问对此有解释吗？

Answer 1

对此有解释吗？

您看到的问题是由于key和ref是特殊道具。 See

大多数JSX元素上的道具都传递给组件，但是，   React有两个特殊的道具（ref和key），   因此不会转发给组件。

例如，尝试从组件访问this.props.key   （即render函数或propTypes）未定义。如果你需要   要访问子组件中的相同值，您应该传递   作为其他道具（例如：<ListItemWrapper key={result.id} id={result.id} />）。虽然这似乎有些多余，但重要的是   将应用逻辑与协调提示分开。

要访问子级中的ref，请以其他方式传递它。假设您创建了一个ref，例如

const ref = React.createRef();

，然后将其传递到组件，如下所示：

<FancyButton forwardedRef={ref} text="Click ME!" />

在FancyButton中的引用将以

的形式提供

 <button
      onClick={() => {
        this.logRef(forwardedRef);
      }}
      ref={forwardedRef}
    >
      {text}
 </button>

其中logRef被定义为

logRef(myref) {
    console.log(myref.current);
}

可以在（单击按钮并检查控制台）上看到一个工作示例：https://codesandbox.io/s/ko6wnrorv

Answer 2

ref的行为不像常规道具。它有特殊的含义。

class A extends React.Component{
    render(){
        return <B
            ref={ref=>this.bRef = ref} 
        />
    }
}

这是什么意思，您在组件'A'中获得组件'B'的引用。也就是说，您可以使用this.bRef从组件“ A”调用组件“ B”中的某些方法

注意：this.bRef仅在渲染A和B之后才得到它的值，直到那时它才是未定义的。

为什么ref在子组件中不是属性？

2 个答案: