在任何地方注入列表、显示、编辑、创建 [英] Injecting List, Show, Edit, Create in any places
问题描述
我想在 <Show/> 组件中创建一个带有 组件的文件浏览器.
I would like create a file browser with <List /> component in <Show /> component.
假设我们有一个拥有主目录的用户，我们想为此目录创建一个能够删除文件的文件浏览器.文件的想法与简单表的想法不符，可以编辑哪些行.
Let's say we have a user with home directory and we want to create a file browser to this directory with ability to remove files. The idea of files doesn't match the idea of simple tables, which rows can be edited.
所以我创建了自己的组件，以用户名和目录作为状态，useDataprovider() 作为钩子，
So I have created my own component with username and directory as states, useDataprovider() as hook, and <Table/> from MUI, altered data provider a bit. And it works quite nice.
问题出现在列表中有很多位置时，比如 50+.分页会很好.所以我试图伪造 <List/> 和后来的 <ListView/> 的 props 来替换 <Table/> 但我失败了.
The problem comes when there are many position in list, like 50+. A pagination would be nice. So I tried to fake props of <List /> and later <ListView /> to replace <Table /> but I failed.
经过简短的代码审查，看起来像按原样实现
After short code review, it looks like implementing <List /> as is, is not possible, because many hooks and other things it uses. In general nesting one into another of any type would be a mess in come.
我的想法是这样的:
function HomedirBrowser({username}) {
const [usrPath, setUsrPath] = React.useState("/");
return (<List
resource={`/users/${username}/dir/${usrPath}`}
>
<Datagrid>
<TextField source="type"/>
<TextField source="name"/>
<TextField source="last_edit"/>
<TextField source="size"/>
<Button onClick={({record}) => setUsrPath(usrPath + "/" + record.name)}>Enter</Button>
</Datagrid>
</List>)
}
自定义resource 取决于状态，按钮可以改变状态.
The custom resource which would depend on a state and the button could alter the state.
这可以吗?或者有任何其他方法可以实现将一个元素嵌套到另一个元素中.
Is this possible to do? Or there is any other way to achieve nesting one element into another.
当然，我根本不想将状态保存到在任何地方的 url 中浏览.
Of course, I don't want to save state to browsing in url of anywhere at all.
推荐答案
我遇到了类似的问题.我想在 Show 组件中放置一个 List 组件.这是我想要实现的示例:
I had a similar problem. I wanted to place a List component inside a Show component. Here is an example what I wanted to achieve:
const AuthorShow = props => (
<Show {...props}>
<TabbedShowLayout>
<Tab label='author'>
<TextField source="firstName"/>
<TextField source="lastName"/>
</Tab>
<Tab label='books'>
<List {...props}
resource='books'
filter={{authorId: props.id}}>
<Datagrid>
<TextField source="title" />
</Datagrid>
</List>
</Tab>
</TabbedShowLayout>
</Show>)
虽然我明确地传递了 'resource' 属性，但它被忽略了，并且使用了 Show 资源 - authors.我设法通过将 List 包装在 Fragment 中来解决此问题.
Although I explicitly passed 'resource' prop, it was ignored and Show resource was used - authors. I managed to fix this behavior by wrapping List in a Fragment.
const AuthorShow = props => (
<Show {...props}>
<TabbedShowLayout>
<Tab label='author'>
<TextField source="firstName"/>
<TextField source="lastName"/>
</Tab>
<Tab label='books'>
<Fragment>
<List {...props}
resource='books'
filter={{authorId: props.id}}>
<Datagrid>
<TextField source="title" />
</Datagrid>
</List>
</Fragment>
</Tab>
</TabbedShowLayout>
</Show>)
我不知道是什么原因导致您无法使用 List 但这至少可以给您一些线索.
I don't know what caused that you failed to use List but this one may give you some clue at least.
这篇关于在任何地方注入列表、显示、编辑、创建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
