fx-form-widget/demo/demo2_DetailRender.md

动态表单组件库

# 🔨 详情组件 demo

```jsx
import React, { Component, useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { DetailRender } from 'fx-form-widget';

const App = () => {
  const [detailList, setDetailList] = useState([]);

  useEffect(() => {
    setDetailList([
      {
        wid: 'separator_EY1Kj8_1635750842',
        fieldName: '',
        title: '分割线',
        value: 'solid',
      },
      {
        wid: 'input_sdsdwa_10001',
        fieldName: 'username',
        title: '姓名姓名姓名姓姓名姓名姓名姓名姓名姓名姓姓',
        value: ['张三', '张三', '张三'],
      },
      {
        wid: 'input_sdsdwa_10001',
        fieldName: 'username',
        title: '姓名姓名姓名姓',
        value: ['张三', '张三', '张三'],
      },
      {
        wid: 'datePicker_sdsdwa_10001',
        fieldName: 'dispatchTime',
        title: '分配时间',
        value: ['2021-10-08', '2021-10-09'],
      },
      {
        wid: 'separator_EY1Kj8_163572133',
        fieldName: '',
        title: '分割线',
        value: 'none',
      },
      {
        wid: 'rate_sdsdwa_10001',
        fieldName: 'rateScore',
        title: '评级',
        value: 2,
      },
      {
        wid: 'separator_EY1Kj8_16312323',
        fieldName: '',
        title: '分割线123',
        value: 'dotted',
      },
      {
        wid: 'addressSelection_sdsdwa_10001',
        fieldName: 'address',
        title: '地址',
        value: '浙江省_杭州市_西湖区',
      },
      {
        wid: 'uploadPic_sdsdwa_10001',
        fieldName: 'picUpload',
        title: '图片上传',
        value: [
          {
            uid: 'MyeV',
            name: 'IMG_0017.JPG',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
          },
          {
            uid: 'LJsU',
            name: 'IMG_0018.JPG',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
          },
          {
            uid: 'MyeV213',
            name: 'IMG_0017.JPG',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
          },
          {
            uid: 'LJsU1asd3',
            name: 'IMG_0018.JPG',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
          },
          {
            uid: 'MyeV21adzc3',
            name: 'IMG_0017.JPG',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
          },
          {
            uid: 'LJsU1zxc23',
            name: 'IMG_0018.JPG',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
          },
        ],
      },
      {
        wid: 'uploadFile_sdsdwa_10001',
        fieldName: 'fileUpload',
        title: '附件上传',
        value: [
          {
            uid: 'wIEA',
            name: '行测答题技巧.pdf',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110091655580008147720.pdf',
          },
          {
            uid: 'LJsU',
            name: 'IMG_0018.JPG',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
          },
          {
            uid: 'wIEA',
            name: '行测答题技巧.pdf',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110091655580008147720.pdf',
          },
          {
            uid: 'LJsU',
            name: 'IMG_0018.JPG',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
          },
          {
            uid: 'wIEA',
            name: '行测答题技巧.pdf',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110091655580008147720.pdf',
          },
          {
            uid: 'LJsU',
            name: 'IMG_0018.JPG',
            status: 'done',
            url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
          },
        ],
      },
      {
        wid: 'addressSelection_sdsdwa_10001',
        fieldName: 'address',
        title: '地址',
        value: '浙江省_杭州市_西湖区',
      },
    ]);
  }, []);

  return (
    <>
      <DetailRender
        dataList={detailList}
        column={2}
        getAnchorInfo={(anchorInfo) => {}}
      />
    </>
  );
};

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