분류 Reactjs

React로 관리자 패널을 만드는 방법 (2)

컨텐츠 정보

  • 조회 363 (작성일 )

본문

/src/users.js
import React from 'react';
import { List, Datagrid, TextField, EmailField, UrlField } from 'react-admin';
export const UserList = props => (
    <List {...props}>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="name" />
            <TextField source="username" />
            <EmailField source="email" />
            <TextField source="address.street" label="Address" />
            <TextField source="phone" />
            <UrlField source="website" />
            <TextField source="company.name" label="Company" />
        </Datagrid>
    </List>
);

위의 코드 블록에서 몇 가지 사항이 변경되었습니다. 먼저 <UrlField> 요소를 사용하여 웹 사이트 열의 링크를 클릭 할 수 있게 합니다. 그런 다음 주소 및 회사 열에 레이블 속성을 추가하여 헤더를 보다 잘 표현할 수 있도록 합니다. App.js로 이동하여 ListGuesser를 UserList로 바꿉니다.


/src/App.js

import React, { Component } from "react";
import { Admin, Resource } from "react-admin";
import { UserList } from './users';
import jsonServerProvider from "ra-data-json-server";

const dataProvider =
  jsonServerProvider("https://jsonplaceholder.typicode.com");

class App extends Component {
  render() {
    return (
      <Admin dataProvider={dataProvider}>
        <Resource name="users" list={UserList} />
      </Admin>
    );
  }
}
export default App;

관리 페이지는 데이터를 편집하고 작성할 수 있어야 합니다. react-admin은 또한 추측을 사용하여 이를 수행합니다. EditGuesser는 관리 페이지의 데이터를 편집하는 데 사용됩니다. App.js에서 react-admin에서 EditGuesser를 가져옵니다.


src/App.js

import React from 'react';
import { Admin, Resource, EditGuesser } from "react-admin";
import { UserList } from './users';

class App extends Component {
  render() {
    return (
      <Admin dataProvider={dataProvider}>
        <Resource
          name="users"
          list={UserList}
          edit={EditGuesser}
        />
      </Admin>
    );
  }
}
    

이제 관리자 인터페이스에서 사용자 세부 정보를 편집 할 수 있습니다 :


https://blog.logrocket.com/wp-content/uploads/2019/08/admin_edit_2_.mp4?_=1 


우리가 사용하는 API 인 JSONPlaceholder에는 편집 및 작성 기능이 없다는 점에 유의해야 합니다. 여기서 발생하는 것은 낙관적 렌더링이라는 개념입니다. 반응 관리자는 백그라운드에서 업데이트 쿼리를 동시에 보내는 동안 변경 사항을 표시하는 데 사용합니다. 쿼리가 실패하면 데이터가 원래 형식으로 다시 변경됩니다.


사용자 나열과 마찬가지로 콘솔을 보면 마크 업으로 입력 할 항목에 대한 아이디어를 얻을 수 있습니다. EditGuesser를 사용한 후의 내용은 다음과 같습니다.


consoledata.png?resize=1363%2C500&ssl=1 


애플리케이션에 콘솔 마크 업을 복제 해 보겠습니다. users.js에서 아래 코드 샘플을 추가하십시오.