React项目经验

一.moment库的使用

//引入
import moment from 'moment';
//设置中文
moment.locale('zh-cn');
//把value格式化成 年月日 格式
moment(value).format('YYYY-MM-DD')

二.field的使用

//引入
import { Field } from '@alifd/next';
//创建 hooks 风格
const field = Field.useField([]);
//注入表单
<Form {...formItemLayout1} field={field}>
    <Form.Item required >
        //必须要要有name属性、defaulValue也能被收集
        <Input name="userCode" defaultValue={listItem.userCode || ''}/>
    </Form.Item>    
<Form>
//表单验证
field1.validate(async (errors, values: any) => {
    if (errors) {
        return
    }
    //values就是拿到的表单数据、所以在这个地方处理表单数据
}

三.React里的一些TS类型

类组件的render方法返回ReactNode，而函数组件返回ReactElement

//解构Children写法
const TableLayout: React.FC = ({ children }: { children: JSX.Element }) => {}

//React.FC
后面可以跟接口，也可以不跟，默认值为空对象
interface Iprops{
    hello?: string
}
const Component:React.FC<Iprops> = () => { return <></> }

//ReactElement 
React.ReactElement是一个接口，包含type,props,key三个属性值。该类型的变量值只能是两种： null 和 ReactElement实例
ReactElement 是一个具有type和props的对象。

//ReactNode 狠多类型都可以,所以不考虑用
一个 ReactNode 是一个 ReactElement、一个 ReactFragment、一个字符串、一个数字或一个 ReactNode 数组，或者 null，或者 undefined，或者一个布尔值

//JSX.Element 
JSX.Element 是一个 ReactElement，props 和 type 的泛型类型是 any。

JSX.Element ≈ ReactElement ⊂ ReactNode

四. JSX 使用

可以在一个 JSX 元素中直接嵌套包含多个元素的数组，数组内的 JSX 元素会被逐个渲染：所以map也是这个原理

label标签的for必须改成 HtmlFor

const arr = [<span>Hello, world!</span>, <span>Hello, Rax！</span>];

const element = <p>{arr}</p>;

五.dangerouslySetInnerHTML

//insertBefore用法
let insertedNode = parentNode.insertBefore(newNode, referenceNode);

//innerHtml用法
innerHtml可以插入标签、而innerText只能插入文本

//dangerouslySetInnerHTML
innerHTML 的替换方案、防止XSS攻击
需要向其传递包含 key 为 __html 的对象
react富文本编辑器进行操作后的内容，会保留原有的标签样式

<div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />

五.导入导出写法

//默认导出
const str='我爱前端'
export default str

//常用方式、简写
import str from './index.js'

//完整写法
import {default as str} from './index.js

//导入后马上导出写法、简写
export { default as Foo } from './Foo';

//完整写法
import {default as b} from './table.js'
export b

//其他：分别暴露和统一暴露