我最近注意到在 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. 有没有关于这个的解释？
有没有关于这个的解释？
您看到的问题是由于key和ref是特殊props。
看
JSX 元素上的大多数 props 都传递给组件，但是，有两个特殊的 props（ref 和 key）被 React 使用，因此不会转发到组件。
例如，尝试从组件（即渲染函数或 propTypes）访问 this.props.key 未定义。如果您需要在子组件中访问相同的值，您应该将其作为不同的 prop（例如：）传递
<ListItemWrapper key={result.id} id={result.id} />。虽然这似乎是多余的，但将应用程序逻辑与协调提示分开很重要。
要在 child 中访问 ref，请将其传递到不同的props中。说你创造了一个ref赞
const ref = React.createRef();
然后将其传递给您的组件，如下所示：
<FancyButton forwardedRef={ref} text="Click ME!" />
在FancyButtonref内部可以作为
<button
onClick={() => {
this.logRef(forwardedRef);
}}
ref={forwardedRef}
>
{text}
</button>
其中logRef定义为
logRef(myref) {
console.log(myref.current);
}
可以在（单击按钮并检查控制台）处看到一个工作示例：https : //codesandbox.io/s/ko6wnrorv
ref 的行为不像常规props。它有特殊的意义。
class A extends React.Component{
render(){
return <B
ref={ref=>this.bRef = ref}
/>
}
}
这里的意思是，您在组件“A”中获得了对组件“B”的引用。也就是说，您可以使用 this.bRef 从组件 'A' 中调用组件 'B' 中的一些方法
注意： this.bRef 只有在 A 和 B 被渲染后才会得到它的值，直到那时它是未定义的。