Question

我正在使用Show来显示学生页面。在学生页面上，我想显示许多课程的列表，并且必须对列表进行分页。

    export const StudentShow = (props) => (
        <Show title='Student' {...props}>
            <SimpleShowLayout>
                // correctly displays the student ID
                <TextField label='id' source='id' />
                <ReferenceManyField
                    label='Courses'
                    target='course'
                    id='student.id'
                    reference='courses'>
                    // how can I properly pass the student ID to List?
                    <List {...props} filter={{ student: student.id }}>
                        <Datagrid>
                            <TextField source='code' />
                        </Datagrid>
                    </List>
                </ReferenceManyField>
            </SimpleShowLayout>
        </Show>
    );

ReferenceManyField正确地对/courses/?student=<studentId>进行API调用，但List只调用/courses/。我无法将学生ID传递给List组件。

如何将学生ID传递给List组件？

Answer 1

您可以在登录时将StudentId保存在localStorage中，并使用它来创建过滤器。没试过这个。但我认为它应该有用。

此外，我不确定List是您作为Child传递给ReferenceManyField的组件。它应该是一个迭代器组件，如DataGrid或SingleFieldList。

https://marmelab.com/admin-on-rest/Fields.html#referencemanyfield

Answer 2

我可以通过创建另一个组件来访问父记录。

const Courses = props => (
    let studentRecord = props.record;

    <div className='field'>
        <ReferenceManyField
            target='course'
            reference='courses'>
            <List {...props} filter={{ student: studentRecord.id }}>
                <Datagrid>
                    <TextField label='id' source='id' />
                </Datagrid>
            </List>
        </ReferenceManyField>
    </div>
);

export const StudentShow = (props) => (
    <Show title='Student' {...props}>
        <SimpleShowLayout>
            // correctly displays the student ID
            <TextField label='id' source='id' />
            <Courses {...props} />
        </SimpleShowLayout>
    </Show>
);

如何使用Admin On Rest将动态过滤器传递给List组件？

2 个答案: