如何从自定义（非 crud、自定义数据）json 显示自定义页面

IT技术 reactjs react-admin
2021-05-25 08:34:22

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

假设我有一个这样的 json：

{
  "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

请注意，我已经有要列出、创建、编辑的页面drinks。现在我只想要一个自定义页面以不同的方式显示它们（而不是在 CRUD 表中）并显示额外的东西。

如果现有端点中包含的端点名称有问题，我可以将“mycustom”端点放在不同的路由中。

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

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

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

1个回答

您可以通过这种方式设置 customRoute传递您的自定义组件。

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

*编辑：

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

       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>)
        };

现在您应该能够访问/foourl上的页面，因为它是在customRoutes.

*编辑 2

如果你根本不想使用 react-admin 钩子，你可以只做一个常规fetch甚至使用 react-admin 的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>)
};
其它你可能感兴趣的问题
上一篇如何在父类组件中获取子类组件的DOM ref 下一篇当 Material Ui 网格包裹在 div 元素中时布局中断