我正在尝试forwardRef
在我的功能组件中使用,该组件也使用react-redux
. 我的组件如下所示:
const InfiniteTable = ({
columns,
url,
data,
stateKey,
loading,
loadMore,
fetchData,
customRecordParams,
...rest
}, ref) => {
const [start, setStart] = useState(0);
const tableRef = React.createRef();
console.log(rest);
let dataSource = data;
if (customRecordParams) dataSource = _.map(dataSource, customRecordParams);
if (dataSource.length > FETCH_LIMIT)
dataSource = _.slice(dataSource, 0, start + FETCH_LIMIT);
useEffect(() => setupScroll(setStart, tableRef), []);
useEffect(() => {
if (loadMore) fetchData(url, stateKey, { start });
}, [start, loadMore]);
useImperativeHandle(ref, () => ({
handleSearch: term => console.log(term),
handleReset: () => console.log("reset")
}));
return (
<Table
columns={columns}
dataSource={dataSource}
pagination={false}
showHeader
loading={loading}
/>
);
};
const mapStateToProps = (state, ownProps) => ({
data: Object.values(state[ownProps.stateKey].data),
loading: state[ownProps.stateKey].isFetching,
loadMore: state[ownProps.stateKey].loadMore
});
export default connect(
mapStateToProps,
{ fetchData },
null,
{ forwardRef: true }
)(InfiniteTable);
但是,当我尝试使用带有 ref 属性的组件时出现此错误:
警告:不能为函数组件提供引用。尝试访问此引用将失败。你的意思是使用 React.forwardRef() 吗?
我究竟做错了什么?