First approach, import all of the react-table.
import * as ReactTable from 'react-table';
class Something extends.ReactComponent<{}, {}>
{
private table: ReactTable.Instance;
public render(): React.ReactNode
{
return <>
<ReactTable.default
...
>
{(state, makeTable, instance) =>
{
this.table = instance;
return makeTable();
}
</ReactTable>
<>;
}
}
<ReactTable.default ...> is a leaky abstraction though. All the advances in adding syntactic sugars to TypeScript/ES6, and yet some devs still want to leak the abstraction, heretic! Might as well just use de-sugarized import:
const ReactTable = require('react-table');
// now usage of .default is excusable
<ReactTable.default
To avoid using the .default directly, just import ReactTable and its type definition separately
import ReactTable, * as ReactTableTypes from 'react-table';
class Something extends.ReactComponent<{}, {}>
{
private table: ReactTableTypes.Instance;
public render(): React.ReactNode
{
return <>
<ReactTable
...
>
{(state, makeTable, instance) =>
{
this.table = instance;
return makeTable();
}
</ReactTable>
<>;
}
}
That's cleaner, you can use ReactTable without the default property. This is possible though:
import ReactTable, * as ReactTableTypes from 'react-table';
class Something extends.ReactComponent<{}, {}>
{
private table: ReactTableTypes.Instance;
public render(): React.ReactNode
{
return <>
<ReactTableTypes.default
...
>
{(state, makeTable, instance) =>
{
this.table = instance;
return makeTable();
}
</ReactTable>
<>;
}
}
But who would do that?
No comments:
Post a Comment