react-admin : <Show> View

The Show View

read-only 상태로 API에서 fetch한 레코드를 나타내는 데 사용하는 뷰

 

 

<Show> component

페이지 타이틀과 액션을 렌더링하고 REST API로부터 레코드를 fetch함

실제 레코드를 렌더링하는 것은 자식 컴포넌트의 역할 -> prop으로 record를 전달

 

컴포넌트의 props

• title 
• actions
• aside : additional information
• component 

 

// in src/App.js
import React from 'react';
import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

import { PostCreate, PostEdit, PostShow } from './posts';

const App = () => (
    <Admin dataProvider={jsonServerProvider('http://jsonplaceholder.typicode.com')}>
        <Resource name="posts" show={PostShow} create={PostCreate} edit={PostEdit} />
    </Admin>
);

export default App;

// in src/posts.js
import React from 'react';
import { Show, SimpleShowLayout, TextField, DateField, EditButton, RichTextField } from 'react-admin';

export const PostShow = (props) => (
    <Show {...props}>
        <SimpleShowLayout>
            <TextField source="title" />
            <TextField source="teaser" />
            <RichTextField source="body" />
            <DateField label="Publication date" source="created_at" />
        </SimpleShowLayout>
    </Show>
);

 

 

 

 

<ShowGuesser> component

 

커스텀한 Show 대신에 사용할 수 있는 컴포넌트

데이터를 fetch하고 response를 분석함

 

 

 

<SimpleShowLayout> component

부모 컴포넌트로부터 prop으로 레코드를 받아 실제 뷰를 렌더링하는 역할

<CardContent /> 내부에 자식 컴포넌트를 한 줄씩 렌더링함

 

<TabbedShowLayout> component

위의 컴포넌트와 마찬가지로 부모 컴포넌트로부터 prop으로 레코드를 받고 실제 뷰를 렌더링 함

차이점은 탭으로 그루핑하여 렌더링하는 것임. -> <Tab> 컴포넌트에 의해 셋팅, label이 필요하고 icon은 옵셔널

 

 

import { TabbedShowLayout, Tab } from 'react-admin'

export const PostShow = (props) => (
    <Show {...props}>
        <TabbedShowLayout>
            <Tab label="summary">
                <TextField label="Id" source="id" />
                <TextField source="title" />
                <TextField source="teaser" />
            </Tab>
            <Tab label="body" path="body">
                <RichTextField source="body" addLabel={false} />
            </Tab>
            <Tab label="Miscellaneous" path="miscellaneous">
                <TextField label="Password (if protected post)" source="password" type="password" />
                <DateField label="Publication date" source="published_at" />
                <NumberField source="average_note" />
                <BooleanField label="Allow comments?" source="commentable" defaultValue />
                <TextField label="Nb views" source="views" />
            </Tab>
            <Tab label="comments" path="comments">
                <ReferenceManyField reference="comments" target="post_id" addLabel={false}>
                    <Datagrid>
                        <TextField source="body" />
                        <DateField source="created_at" />
                        <EditButton />
                    </Datagrid>
                </ReferenceManyField>
            </Tab>
        </TabbedShowLayout>
    </Show>
);

 

탭 컴포넌트를 스타일링하기 위해 2가지 prop을 사용할 수 있음 : className (탭 헤더), contentClassName (탭 콘텐트)