react: antd组件使用 FC Fragment

小强有个dream2023-11-10 12:59

RangePicker

javascript 复制代码

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

javascript 复制代码

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

javascript 复制代码

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警告