如何解决React.createRef不起作用-无法为函数组件提供引用
我有这个父类组件
class TransferHolder extends Component {
constructor(props) {
super(props);
this.transfer = React.createRef();
}
render() {
return (
<div>
<h1>HELLO !</h1>
<Transfer ref={this.transfer}/>
<Button onClick={() => {
const TransferRef = this.transfer.current;
console.log('Selected: ',TransferRef.state.projectForm.users.right)
}}>
Print
</Button>
</div>
)
}
}
const mapStateToProps = state => {
return {
};
};
const mapDispatchToProps = dispatch => {
return {
};
};
export default connect(mapStateToProps,mapDispatchToProps)(TransferHolder);
当我访问页面时,会自动显示一个错误,提示:
index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `TransferHolder`.
in ConnectFunction (at TransferHolder.js:19)
in div (at TransferHolder.js:17)
in TransferHolder (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in Content (at ContentRoute.js:23)
我只想访问<Transfer>
组件的状态,该组件是基于类的组件。但是它也包装在redux connect()中,所以我不知道是否能将其转换为功能性的。
解决方法
假设您的组件Transfer
的代码如下:
const Transfer = props => <p {...props}>Some Transfer component</p>;
如果您像上面那样使用此组件
<Transfer ref={this.transfer} />
它将失败,并显示错误消息
警告:不能为功能组件提供引用。尝试访问此引用将失败。您是要使用React.forwardRef()吗?
因为默认情况下普通功能组件无法处理引用。为了避免该错误,您必须将组件包装在forwardRef中:
const Transfer = forwardRef((props,ref) => <p {...props} ref={ref}>Some Transfer component</p>;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。