如何从自定义(非 crud、自定义数据)json 显示自定义页面 [英] How to display a custom page from a custom (non crud, custom data) json

问题描述

我能够使用 react-admin 3.x(从 2.x 迁移)和作为数据提供者 jsonServerProvider 创建一个简单的管理面板.现在我想要一个显示一些自定义数据的自定义页面.

I was able to create a simple admin panel using react-admin 3.x (migated from 2.x) and as data provider the jsonServerProvider. Now I'd like to have a custom page showing some custom data.

假设我有一个这样的 json:

Say I have a json like this:

{
  "title":"My custom page",
  "teaser":"This is a custom page showing some stuff",
  "drinks":[{"name":  "coke", "image": "coca-cola.jpg"}, {"name":  "beer", "image": "beer.png"}, {"name":  "coffee", "image":  "cappuccino.jpg"}],
  "additional_stuff": ["some", "more", "stuff"]
}

我实际上创建并调用了如下端点:/api/drinks/mycustom

I actually created and endpoint called something like: /api/drinks/mycustom

注意，我已经有页面可以列出、创建、编辑 drinks.现在我只想要一个自定义页面以不同的方式显示它们(而不是在 CRUD 表中)并显示额外的内容.

Note, that I already have pages to list, create, edit drinks. Now I just wanted a custom page to show them in a different way (not in a CRUD table) and to display extra stuff.

如果包含在现有端点中的端点名称有问题，我可以放置mycustom"不同路径中的端点.

If the endpoint name included in an existing one is a problem, I can place "mycustom" endpoint in a different route.

我想在左侧的默认菜单中有一个条目，点击它时，react-admin 应该查询资源并使用来自端点的 json 数据填充页面.

I'd like to have an entry in the default menu on the left, when clicking it, react-admin should query the resource and populate the page with the json data coming from the endpoint.

我只是不知道如何制作这样的自定义页面，没有在文档中找到合适的示例，这就是我来这里的原因.

I just don't get how to make such a custom page, didn't find a proper example in the documentation and that's why I'm here.

感谢您提供有关如何实现这一目标的示例.

Thanks for providing an example on how to achieve this.

推荐答案

你可以在这个方式 传递您的自定义组件.

You can set a customRoute in this way passing your custom component.

如果提供的常规端点数据足以满足您的需求，则无需新端点即可查询 API.只需调用 useGetOne 或 useGetList hook 取决于您的自定义页面显示的内容.

To query the API you don't need a new endpoint if the provided data on the regular ones is sufficient for your needs. Just call the useGetOne or useGetList hook inside depends on what your custom page shows.

*

在您的情况下，让我们采用 stats/foo.js 组件并假设您想为 trades 资源显示另一个布局(根据需要与任何其他资源交换):

In your case let's take the stats/foo.js component and assume you want to show another layout for the trades resource (swap with any other as you wish):

       const Foo = () => {
          const { data, ids, loading, error } = useGetList(
             'trades',
             { page: 1, perPage: 10 },
             { field: 'id', order: 'DESC' }
          );

          if (loading) { return <Loading />; }
          if (error) { return <p>ERROR</p>; }

          return (
            <Card>
              <Title title="Trades Stats" />
              <CardContent>
                <ul>
                 {ids.map(id =>
                    <li key={id}>{data[id].title}</li>
                  )}
                </ul>
              </CardContent>
            </Card>)
        };

现在您应该可以访问 /foo url 上的页面，因为这是在 customRoutes 中注册的方式.

Now you should be able to access the page on the /foo url as this is how it is registered in customRoutes.

*编辑 2

如果你根本不想使用 react-admin 钩子，你可以只做一个常规的 fetch 甚至使用 react-admin 的 fetchUtils:

If you don't want to use the react-admin hooks at all you can do just a regular fetch or even get use of react-admin's fetchUtils:

import { fetchUtils } from 'react-admin';

const fetchJson = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    // add your own headers here
    // options.headers.set('X-Custom-Header', 'foobar');
    return fetchUtils.fetchJson(url, options);
}

并拨打以下电话:

const Foo = () => {
  const [data, setData] = React.useState({});

  React.useEffect(() => {
       fetchJson(baseUrl + '/trades')
          .then(response => {
             return response.json;
          })
          .then(data => {
             setData(data); 
          });
  }, []);
  
  return (
    <Card>
      <Title title={data.title} />
      <CardContent>
        <div>{data.teaser}</div>
      </CardContent>
    </Card>)
};

这篇关于如何从自定义(非 crud、自定义数据)json 显示自定义页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！