RangePicker
const defaultDate = '2021-22-16'
const [reportDate, setReportDate] = useState<any>([defaultDate , defaultDate]);
<RangePicker
style={{width: '260px'}}
placeholder={['开始日期', '结束日期']}
allowClear={false}
defaultValue={[defaultDate, defaultDate]}
value={reportDate}
onChange={(dates: any) => {
setReportDate(dates)
}}
/>
select
const [version, setVerson] = useState([0]);
<Select
showSearch
placeholder="请选择引擎版本号"
options={[{label: 'zhangsan', value: 0}, {label: 'lisi', value: 1}]}
value={version}
style={{width: '200px', marginLeft: '20px', marginRight: '20px'}}
onSelect={(value: string) => {
setVerson([value])
}}
/>
React.FC(函数组件)
React.FunctionComponent
函数组件是一个纯函数,使用React.FC来写 React 组件的时候,不能用setState,取而代之的是useState()、useEffect等 Hook API。函数组件也称为无状态组件。
FC接收一个props对象返回一个react元素。React.FC隐式的提供了一个children props
import React, { useState, FC } from "react";
interface IProps {
test?: any;
}
const Index: FC<IProps> = (props) => {
let [count, setCount] = useState(0);
return (
<div>
<p>fc --- {count}</p>
<button onClick={() => setCount(count + 1)}>Click</button>
</div>
);
};
export default Index;
React.Fragment
在 React 中, <></> 是 <React.Fragment/> 的语法糖。
<></> 语法不能接受键值或属性。
如果你需要一个带 key 的片段,你可以直接使用 <React.Fragment /> 。key 是唯一可以传递给 Fragment 的属性。 // 没有key
,将会触发一个key警告