react antd list用法

在这里插入代码片
```import React, { useState, useRef, useEffect, useCallback } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Card } from 'antd'
import { FormattedMessage, formatMessage } from 'umi';
import { AlipayOutlined, DingdingOutlined, TaobaoOutlined } from '@ant-design/icons';
import { List } from 'antd';
import UpdateForm from './components/UpdateForm';
import './index.less'

const TableList: React.FC = () => {
  const [count, setcount] = useState<any>(0)
  const [childrenvalue, setChildrenValue] = useState<any>('')
  


  // 父传子
  const changeCount = useCallback(() => {

    setcount(count + 1)
    setloading(true)
  },
    [count])

  // 子传父
  const getChildren = (value: any) => {
    setChildrenValue(value)
  }
  // css 尽量不设宽高用padding撑开
 const getData = () => [
    {
      title: formatMessage({ id: 'accountandsettings.binding.taobao' }, {}),
      description: formatMessage({ id: 'accountandsettings.binding.taobao-description' }, {}),
      actions: [
        <a key="Bind">
          11111
        </a>,
      ],
      avatar: <TaobaoOutlined className="taobao" />,
    },
    {
      title: formatMessage({ id: 'accountandsettings.binding.alipay' }, {}),
      description: formatMessage({ id: 'accountandsettings.binding.alipay-description' }, {}),
      actions: [
        <a key="Bind">
          <FormattedMessage id="accountandsettings.binding.bind" defaultMessage="Bind" />
        </a>,
      ],
      avatar: <AlipayOutlined className="alipay" />,
    },
    {
      title: formatMessage({ id: 'accountandsettings.binding.dingding' }, {}),
      description: formatMessage({ id: 'accountandsettings.binding.dingding-description' }, {}),
      actions: [
        <a key="Bind">
          <FormattedMessage id="accountandsettings.binding.bind" defaultMessage="Bind" />
        </a>,
      ],
      avatar: <DingdingOutlined className="dingding" />,
    },
  ];

  return (
    <PageContainer>
      <Card>
        <div className={count !=='0'?'contoner1': 'contoner'}>
          {count}  {childrenvalue}
        </div>
        <UpdateForm changeCount={changeCount} getChildren={getChildren} />
      </Card>
      <Card title='孙继稳'>
        {/* list用法 */}
      <List
          itemLayout="horizontal"
          dataSource={getData()}
          renderItem={(item) => (
            <List.Item actions={item.actions}>
              <List.Item.Meta
                avatar={item.avatar}
                title={item.title}
                description={item.description}
              />
            </List.Item>
          )}
        />
      </Card>
    </PageContainer>
  );
};

export default TableList;