注入列表，显示，编辑，在任何地方创建

Question

我想用<List />组件中的<Show />组件创建文件浏览器。

假设我们有一个具有主目录的用户，我们希望为此目录创建一个文件浏览器，并具有删除文件的功能。文件的概念与简单表的概念不符，后者可以编辑行。

因此，我创建了自己的组件，其中用户名和目录为状态，useDataprovider()为钩子，而MUI中的<Table/>，则稍微改变了数据提供程序。而且效果很好。

问题出在列表中有很多职位，例如50+。分页会很好。因此，我尝试[[fake <List />和更高版本<ListView />的道具替换<Table />，但失败了。

经过简短的代码审查后，似乎无法实现<List />，因为它使用了很多钩子和其他东西。通常，将一个嵌套到另一个任何类型都会很麻烦。

我的想法如下：

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。
这有可能吗？或者还有其他方法可以将一个元素嵌套到另一个元素中。
当然，我根本不希望将状态保存为在任何地方的url中浏览。

Answer 1

我有类似的问题。我想将List组件放置在Show组件内。这是我想要实现的示例：

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中来解决此问题。
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，但这至少可以为您提供一些线索。