Ant Design 组件库按钮实现示例详解_React_

import { Button } from 'antd'; import React from 'react'; const App = () => ( <>Primary ButtonDefault ButtonDashed Button
Text ButtonLink ButtonGhost Button ); export default App; 

import { SearchOutlined, PlayCircleOutlined, ZoomInOutlined, RedoOutlined, AndroidOutlined, AppleOutlined, WechatOutlined, EyeOutlined, ShareAltOutlined, MessageOutlined} from '@ant-design/icons'; import { Button, Tooltip } from 'antd'; import React from 'react'; const App = () => ( <>} /> A }> Search } />}>Search
} />}>Search} />}> Search } href="https://www.google.com" rel="external nofollow" rel="external nofollow" />

} size="large" /> A } size="large"> Search } size="large" />} size="large"> Search 
} size="large" />} size="large"> Search } size="large" />} size="large"> Search } size="large" href="https://www.google.com" rel="external nofollow" rel="external nofollow" /> ); export default App; 

import { Button } from 'antd'; import React from 'react'; const App = () => ( <>Primary Primary(disabled) 
DefaultDefault(disabled)
Dashed Dashed(disabled) 
Text Text(disabled) 
Link Link(disabled) 
Danger Default Danger Default(disabled) 
 Danger Text  Danger Text(disabled) 
 Danger Link  Danger Link(disabled) 
Ghost Ghost(disabled) 
 ); export default App; 

import { PoweroffOutlined } from '@ant-design/icons'; import { Button, Space } from 'antd'; import React, { useState } from 'react'; const App = () => { const [loadings, setLoadings] = useState([]); const enterLoading = (index) => { setLoadings((prevLoadings) => { const newLoadings = [...prevLoadings]; newLoadings[index] = true; return newLoadings; }); setTimeout(() => { setLoadings((prevLoadings) => { const newLoadings = [...prevLoadings]; newLoadings[index] = false; return newLoadings; }); }, 6000); }; return ( <> Loading  Loading } loading /> enterLoading(0)}> Click me! } loading={loadings[1]} onClick={() => enterLoading(1)} > Click me! } loading={loadings[2]} onClick={() => enterLoading(2)} /> ); }; export default App;