javascript - 转发 Refs:forwardedRef 始终为 null
问题描述
我有一个要附加的 ant 设计Table
组件。ref
我希望能够使用tableRef
in HOCwithCustomPagination
的生命周期componentDidUpdate
方法。
在React Docs Forwarding Refs之后,我无法清楚地理解。我可以编写以下代码:
应用程序.js
import WrappedTable from '/path/to/file';
class App extends React.Component {
render() {
const tableRef = React.createRef();
return (
<WrappedTable ref={tableRef} />
)
}
}
表.js
import withCustomPagination from '/path/to/file';
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
<TableContainer ref={this.props.forwardedRef} />
}
}
const WrappedTable = withCustomPagination(Table);
export default WrappedTable;
withCustomPagination.js
import CustomPagination from 'path/to/file';
const withCustomPagination = tableRef => Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
tableRef.current.state ..... //logic using ref, Error for this line
this.state.rows ..... //some logic
}
render() {
const { forwardedRef } = this.props;
return (
<Component {...this.state} ref={forwardedRef} />
<CustomPagination />
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
调试后,我发现它forwardedRef
总是为空。
解决方案
您的问题发生在您的 HOC 中:
here
const withCustomPagination = tableRef => Component => {
您需要删除该参数。访问 ref prop 的componentDidUpdate
方法很简单,就像forwardedRef
prop 一样,例如:
import CustomPagination from 'path/to/file';
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
const { forwardedRef } = this.props;
return (
<Component {...this.state} ref={forwardedRef} />
<CustomPagination />
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
还有一些需要考虑的事情是:
您不应该在 render 方法中创建 ref,因为每次设置状态时都会引发此方法。我建议你在构造函数中这样做:
import WrappedTable from '/path/to/file';
class App extends React.Component {
constructor(){
super();
this.reference = React.createRef();
}
render() {
return (
<WrappedTable ref={this.reference} />
)
}
}
同样在您 HOC 中只渲染一个孩子或使用React.Fragment
. 此外不要忘记发送其余属性:
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
// Do not forget to send the rest of properties here like:
const { forwardedRef, ...rest } = this.props;
return (
<React.Fragment>
<Component {...this.state} ref={forwardedRef} {...rest} />
<CustomPagination />
</React.Fragment>
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
编辑:
添加 ref 属性的引用
import withCustomPagination from '/path/to/file';
class Table extends React.Component {
constructor(props) {
super(props);
this.reference = React.createRef();
}
render() {
<TableContainer ref={this.reference} />
}
}
const WrappedTable = withCustomPagination(Table);
export default WrappedTable;
推荐阅读
- amazon-web-services - 亚马逊云与其CDN(内容分发网络)的区别
- python - sklearn;模型拟合前后超参数值相同
- java - 为什么我的队列列表在 java 中不能作为 FIFO 工作?
- excel - 如何在excel VBA中使用多个列值验证列
- java - 尝试使用双打和 Math.sqrt 进行计算,但只得到 0
- c++ - 无法使用 Nlohmann 的 JSON 在自身内部获取对象向量
- ffmpeg - 如何裁剪然后缩放视频ffmpeg
- python - 两个列表的乘积之和
- docker - docker postgres 无法在非标准端口上向前连接
- php - Laravel CSS 和 Bootstrap 不起作用