Question

我正在使用 react admin loopback 软件包将 loopback 3 开发的api加载到 react admin 中。我的疑问是我正在编写远程api id基于我的响应中的值的获取列表。它导致如何加载react admin datagrid。

这是我尝试基于react admin loopback加载到我的react admin中。这个标准模板ID传递到我的模板页面。基于id的调用api并加载到datagrid。我不知道吗？如何在datagrid中传递api

http://localhost:3000/api/templates/gettemplatebystandardtemplateid?standardtemplateid=5c934f75fd22e006749e4ab8

StandardTemplate.js

import React, { Component } from 'react';
import {
    List,
    SimpleList,
    Responsive,
    Datagrid,
    TextField,
    EditButton,
    ShowButton, Edit, SimpleForm, TextInput
} from 'react-admin';
import { Link } from 'react-router-dom';

import { Config } from '../../config';
import { Button } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
const styles = {
    button: {
        fontWeight: 'bold',
        // This is JSS syntax to target a deeper element using css selector, here the svg icon for this button
        '& svg': { color: 'orange' }
    },
};
const MyEditButton = withStyles(styles)(({ classes, ...props }) => (
    <Button source="id"
        component={Link}
        to={{
            pathname: `/template/${props.record.id}`
            // state: { id: props.record.id }
        }}
    >
        Templates
                                             </Button>

));
class StandardTemplateList extends Component {
    componentDidMount() {
        console.log(this.props);
        document.title = Config.app.name + ' - StandardTemplate';
    }
    render() {
        return (
            <List {...this.props}>
                <Responsive
                    small={
                        <SimpleList
                            primaryText={record => record.name}
                            secondaryText={record => `${record.services} views`}
                            tertiaryText={record => new Date(record.createdAt).toLocaleDateString()}
                        />
                    }

                    medium={<Datagrid>
                        <TextField source="id" />
                        <TextField source="name" />
                        <TextField source="format" />
                        <TextField source="services" />
                        <TextField source="createdby" />
                        <MyEditButton />
                        <EditButton />
                        <ShowButton />
                    </Datagrid>
                    }
                />
            </List>
        );

    }
}

export default StandardTemplateList;

Template.js

import React, { Component } from 'react';
import {
    List,
    SimpleList,
    Responsive,
    Datagrid,
    TextField,
    EditButton,
    ShowButton
} from 'react-admin';
import { Link } from 'react-router-dom';
import { GET_LIST,GET_ONE } from 'react-admin';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import dataProvider from '../../dataProvider';
import { Button } from '@material-ui/core';

class TemplateList extends Component {

componentDidMount() {
        console.log(this.props);
        document.title = Config.app.name + ' - Template';
    }
    render() {

        return (
        <List {...this.props}>
        <Responsive
            small={
                <SimpleList
                    primaryText={record => record.name}
                    secondaryText={record => `${record.services} views`}
                    tertiaryText={record => new Date(record.createdAt).toLocaleDateString()}
                />
            }

            medium={
            <Datagrid>
                <TextField source="id" />
                <TextField source="name" />
                <TextField source="createdby" />
                <EditButton />
                <ShowButton />
            </Datagrid>
            }
        />
    </List>
  ) }
}

export default TemplateList;

如何在React Admin DataGrid中环回远程API响应负载

0 个答案: