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

Question

我想创建一个文件浏览器<List /><Show />组件。

假设我们有一个具有主目录的用户，并且我们想为该目录创建一个能够删除文件的文件浏览器。文件的想法与可以编辑哪些行的简单表的想法不匹配。

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

当列表中有很多位置时，问题就来了，比如 50+。分页会很好。所以我试图伪造<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>)

虽然我明确传递了"资源"道具，但它被忽略了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但这个至少可以给你一些线索。

Answer 2

我有类似的代码：

<Fragment>
<List
{...props}
resource="card_program_options"
filterDefaultValues={{ card_id: 1 }}
sort={{ field: "id", order: "ASC" }}
>
<Datagrid>
<TextField source="card_id" />
<TextField source="card_programs_id" />
</Datagrid>
</List>
</Fragment>

但我在页面上看到的唯一内容是找不到结果

在显示中找不到结果的屏幕截图

我看到后端发出的请求，并以 200 响应代码完成。

感谢帮助！