react: antd组件使用 FC Fragment

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)
          }}
        />
1
2
3
4
5
6
7
8
9
10
11
12
13

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])
       }}
     />
1
2
3
4
5
6
7
8
9
10
11

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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

React.Fragment

在 React 中， <> 是 的语法糖。
<> 语法不能接受键值或属性。

如果你需要一个带 key 的片段，你可以直接使用 。key 是唯一可以传递给 Fragment 的属性。 // 没有key，将会触发一个key警告