Внедрение List, Show, Edit, Create в любых местах

Я хочу создать файловый браузер с <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-адресу где бы то ни было.


react-admin
person Adam Jędrzejowski    schedule 19.12.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

У меня была похожая проблема. Я хотел разместить 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, но это может дать вам хоть какую-то подсказку.

person Tomek Stankowski    schedule 23.12.2019

arrow_upward
0
arrow_downward

У меня похожий код:

<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.

Помощь приветствуется!

person ameyrupji    schedule 15.10.2020