在这里插入代码片
```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;
react antd list用法
最新推荐文章于 2024-01-02 17:13:59 发布