Question

我正在使用mui-datatables，但发现它与功能组件（Material UI v4）不兼容，但是我发现Forwarding Refs应该可以解决我的问题，我遵循了它，但我想我做错了。

// TablesList.js
const useStyles = makeStyles(theme => ({
    toolbar: theme.mixins.toolbar,
    content: theme.styles.content,
}));

const TableList = React.forwardRef((props, ref) => {
    const classes = useStyles();
    const columns = ["Name", "Company", "City", "State"];
    const options = {
        filterType: 'textField',
        rowsPerPage: 50,
        rowsPerPageOptions: [10, 50, 100]
    };

    const data = [
        ["Joe James", "Test Corp", "Yonkers", "NY"],
        ["John Walsh", "Test Corp", "Hartford", "CT"],
        ["Bob Herm", "Test Corp", "Tampa", "FL"],
        ["James Houston", "Test Corp", "Dallas", "TX"],
    ];
    return (
        <main className={classes.content}>
            <div className={classes.toolbar}/>
            <MUIDataTable
                ref={ref} // Passing ref
                title={"Employee List"}
                data={data}
                columns={columns}
                options={options}
            />
        </main>
    )
});

我在Route中称呼这个组件：

<Route exact path="/" component={TablesList} ref={ref}/>

那么我在这里做错了什么？因为我仍然在控制台中看到错误。

Answer 1

很遗憾，尚不支持Material UI 4。 GitHub上还有一张公开票：（请参见https://github.com/gregnb/mui-datatables/issues/595

mui-datatables：警告：无法为功能组件提供引用。尝试访问此引用将失败。您是要使用React.forwardRef（）吗？

1 个答案: