---
title: 兼容用法
order: 1
---

````jsx
import React, { useState, useRef} from 'react';
import ReactDOM from 'react-dom';
import FormList from '@alibsp/form-list';
import ListMap from './listMap';
import { getTableData, getSchema } from './getData.tsx';
import '@alifd/next/index.scss'

function App() {
  const [formListKey, setFormListKey] = useState(0); 
  const [status, setStatus] = useState(4);
  const ref = useRef();


  const actions = [
    {
      component: () => (
        <div >YYYY</div>
      ),
    },
  ];

  const CustomActionBarRender = (props) => {
    const { refresh } = props || {};

    return (
      <div>
        <div
          type="primary"
          onClick={() => {
            // TODO: 实现新增模型功能
            console.log('新增模型');
            
            // 更新渲染
            refresh();
          }}
        >
          + 新增模型
        </div>
      </div>
    );
  }

  // 注册自定义表格列组件
  const tableColumnsMap = {
    Text: ({ value }) => value || '-',
  };

  const tableColumns = [
    {
      title: '模型名称',
      dataIndex: 'name',
      width: 200,
      type: 'Text',
    },
    {
      title: '模型类型',
      dataIndex: 'modelTypeName',
      width: 150,
      type: 'Text',
    },
    {
      title: '模型用途',
      dataIndex: 'capacityName',
      width: 180,
      type: 'Text',
    },
    {
      title: '模型来源',
      dataIndex: 'sourceName',
      width: 120,
      type: 'Text',
    },
    {
      title: '套件版本',
      dataIndex: 'publishVersion',
      width: 120,
      type: 'Text',
    },
    {
      title: '模型支持能力',
      dataIndex: 'componentTypeNames',
      width: 200,
      type: 'Text',
    },
    {
      // 表格最后一列是操作列
      title: '操作',
      dataIndex: 'actions',
      width: 260,
      type: 'Actions',
      lock: 'right',
    },
  ];

  const filterItems = [
    
  ];

  const fetchData = async ({ current, pageSize }, formData = {}) => {
    return new Promise((res, rej) => {
      setTimeout(() => {
        res( { list: [], total: 0 })
      }, 1000)
    })
  };
  
  return (
    <div>
      <FormList
        customActionBarRender={(refresh) => <CustomActionBarRender refresh={() => {}} />}
        tableColumnsMap={tableColumnsMap}
        key={formListKey}
        fetchData={fetchData}
        schema={{
          tableSchema: { props: { columns: tableColumns } },
          filterSchema: { props: { dataSource: filterItems } },
        }}
        tableShuttle={{
          hasBorder: false,
        }}
        filterProps={{
          defaultExpended: true,
          col: 4,
          shuttleProps: {},
        }}
        paginationProps={{
          hideOnlyOnePage: true,
        }}
      />
    </div>
  );
  
}

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

```css
#usage {
  width: 100%
}
```