react+ts简单的知识点（自记）

递归

const Func= (value) => {   //使用数据的时候直接Func(参数)
  const array [];  //定义一个空数组，最后也返回这个数组值
  value.forEach((item) => {  //用foreach而不是map遍历
    let obj=item;  //定义一个对象把item的值赋给它，注意真实代码不能写成
    //=item,需要写成={key:value,...,children:[]}除了children之外的值赋给
    //obj,children属性给[]
    if(/*判断条件判断是否有children，需要遍历*/){
    //如果在这个条件下还有需要操作的内容，比如渲染节点，直接在这给obj赋值
    obj = {
        ...item,
        title: '....'
      };
    obj.children = Func(item.children || []);//这里体现递归思路
    }
     //如果还有其他判断条件可以继续写
     if(...){
     obj = { ...item, title: '!@@@'};
     }
    //遍历的最后要把obj的值给array
    array.push(obj);
  });
  //方法的最后返回array的值即可
  return array;
};

1、ant design 中的datepicker组件，onChange方法

onChange(e)=>{
  e.map((item)=>{
    console.log(item)
    //item直接就可以获取到moment格式的时间，不需要e[0]._d
  }
)}

2、不能在同步函数中去调用异步函数
3、promise.all方法可以批量调用异步方法，全部方法执行完后在.then里面会返回一个数组，内容是这些函数返回的内容。
4、获取本页面url的方法，window.location.origin/host/href
5、git回溯版本，git reset --hard +版本号
6、git push origin +分支名 --force强制提交
7、无返回值函数

onclick={()=>{void func()}

8、map遍历时如果return的html标签，在最外层需要添加key属性

9、父子组件的传值。

首先我在子页面（这是跨页面的父子组件传值问题）把这个页面包装成一个组件，这样在父页面就可以去引用这个组件。

//这是父页面的代码，data是传给子页面的值，getChildren是传给子页面的方法，子页面也可以通过这个方法返回值，在父页面getFunction就可以获取。
<组件名 data={data} getFunction={getChildren} />

//这是子页面的代码
type selfProps = {
  getFunction: Function;
  data: ts定义;
};
const TableColumn（组件名）: React.FC<selfProps> = (props) => {
  const { data} = props;
  const { getFunction } = props;

这样data就可以当子页面的全局变量使用，而getFunction 这个方法就可以当usestate使用，比如：

getFunction ('字符串')

在父页面的getChildren方法里就可以取得子组件传过来的值

  const getChildren= (val: []) => {
    setSelectRows(val);//这里是usestate赋值，相当于把子组件传过来的值放到了val里面
  };

这个很重要！！！！
10、你是否遇到过这种问题？比如ant design的Table组件有一个onRow方法

const onRow=(record,index)=>{
console.log(record)
console.log(index)
}
.....
<Table onRow={onRow} />

可以注意到的是onRow方法并没有传任何参数，record和index的值是方法自身携带的，这时候如果需要往这个方法里传一个外界的参数怎么办？

 const onRow= (record: DataType, index: number) => {
    return newFunc(record, index, 外界参数);
  };

这个解决方案相当于创建一个中间方法先获取到组件函数携带的值再和外界参数一起传到新方法里
11、遇到更新state的值但是页面不触发渲染的问题，如果是一个数组的更新

const [arr,setArr]=useState([])
Function=()=>{
arr.splice()//巴拉巴拉进行了一系列操作之后
在此console.log(arr)值已经更改
setArr(arr)//但是这个操作并没有生效
//换种写法即可
setArr([...arr])
}

12、如何将一个自定义多种类型的数据变成特定一种类型数据使用

const onClick=(value:Type1|Type2)=>{
const newData:Type1=value as Type1
//这种只适用于你确定数据只会以这一种类型出现
}
<Button onclick={onClick(data)} />

谈一下我是怎么会有这个需求的呢，起因是在Form组件里面onFinish方法在编辑和新增两种状态下会有两种类型的values，我就写了两个方法。

const AddFinish=(values:Type1)=>{

}
const EditFinish=(values:Type2)=>{

}
onFinish={type==='add'?AddFinish:EditFinish}

这样写就会过不了ts校验，会报错两个values类型冲突。