---
title: 详情预览态
order: 8
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwJsonForm } from '@ywfe/yw-design';
import 'antd/dist/antd.css';
const Image = ({field})=>{
    return <img src={field.value} width='120' height='120'/>
}
const items = [
  {
    title: '账号信息',
    component: 'FormGroup',
    children: [
      {
        title: '账号',
        name: 'userName',
        component: 'PreviewText.Input',
      },
      {
        title: '账号状态',
        name: 'statusName',
        component: 'PreviewText.Input',
      },
      {
        title: '注册时间',
        name: 'date',
        component: 'PreviewText.DatePicker',
      },
      {
        title: '注册来源',
        name: 'source',
        component: 'PreviewText.Input',
      },
    ],
  },
  {
    title: '企业信息',
    component: 'FormGroup',
    children: [
      {
        title: '品牌创建日期',
        name: 'date',
        component: 'PreviewText.DatePicker',
      },
      {
        title: '品牌类型',
        name: 'statusName',
        component: 'PreviewText.Input',
      },
      {
        title: '主打产品',
        name: '',
        component: 'PreviewText.Input',
      },
      {
        title: '产品图片',
        name: 'img',
        customComponent: Image,
      },
    ],
  },
];

const App =  ()=> {
    return (
      <div>
        <YwJsonForm
            items={items}
            onCreate={(form) => {
                form.setValues({
                    userName: '测试账号',
                    statusName: 'xxx',
                    date: '2020-11-23 22:15:20',
                    source: 'xxxx',
                    img: 'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg'
                });
            }}
            buttons={[]}
            layoutProps={{ labelCol: 4, wrapperCol: 20, feedbackLayout: 'terse' }}
        />
      </div>

    );
}

ReactDOM.render(<App />, mountNode);
```