5年Vue项目需要转React开发
vue+element+js=> react + ant design + ts 每日积累 react ts写法
2023/11/04
1、import React, { useEffect, useState, useRef } from 'react';
useEffect：我理解就是vue的mounted()函数，是React中的一个钩子函数，用于处理副作用操作。副作用是指在组件渲染过程中，可能会对外部环境产生影响的操作，比如数据获取、订阅事件、操作DOM等。
useEffect(() => {
// 副作用函数
// 在组件渲染时执行
// 可以进行副作用操作
}, [依赖数组]);
副作用函数会在组件渲染时执行，并且在每次组件更新后也会执行。如果依赖数组不为空，并且依赖数组中的值发生变化时，副作用函数也会被重新执行。如果依赖数组为空，副作用函数只会在组件首次渲染时执行一次。副作用函数可以返回一个清除函数，用于清除副作用操作。参考React中useEffect函数
2024/03/20 整理
1.vue中常用v-if来实现重新渲染dom，对应react中一般采用三元表达来实现，譬如下面代码刷新tree：
<div>
{
treeData.length === 0 ? (
<div>加载中...</div>
) : (
<Tree
checkable
checkStrictly
multiple={true}
loadData={({ key, children }) => onLoadData({ key, children })}
onCheck={treeOnCheck}
checkedKeys={{
checked: checkedKeysArr,
halfChecked: [],
}}
>
{renderTreeNodes(treeData)}
</Tree>
)
}
</div>
2.父子交互
2.1父组件调用子组件方法, set/get子组件数据->ref 跟vue的this.$refs['queryTreeData'].xxx()
父组件:
// html
<Inquire
ref={queryTreeData}
/>
// js
import Inquire from './common/Inquire'; // 子组件Inquire
const queryTreeData: any = useRef(null); // 子组件tree-ref
queryTreeData.current.setMainTreeInit(); // 调用子组件初始化
queryTreeData.current.getAllKeysF();// 获取子组件数据
子组件Inquire:
//js
const [treeData, setTreeData] = useState<any[]>([]);
useImperativeHandle(ref, () => ({
setMainTreeInit,
getAllKeysF,
}));
const setMainTreeInit = (data: any) => {
setTreeData(data); // 设置树 数据
};
const getAllKeysF = (key: any) => {
return JSON.parse(JSON.stringify(allTreeKeys));
};
2.2子组件调用父组件方法 vue的this.$emit('clickTreeNodeFuc')
父组件:
// html
<Inquire
clickTreeNodeFuc={setHistoryLog}
/>
// js
import Inquire from './common/Inquire'; // 子组件Inquire
const setHistoryLog = (flag: string) => {
setEditHisList([flag]);
}；
子组件Inquire:
//js
interface InquireProps {
clickTreeNodeFuc: any;
ref: any;
}
const Inquire: React.FC<InquireProps> = forwardRef((props, ref) => {
const setMainTreeInit = (data: any) => {
props.clickTreeNodeFuc('init');
};
})
2.3父组件传递子组件数据
父组件：
// html
<TreeGraph
ref={TreeGraphRef}
collapsed={collapsed}
/>
子组件监听父组件的collapsed值
interface InquireProps {
ref: any;
collapsed: any;
}
const TreeMap: React.FC<InquireProps> = forwardRef((props, ref) => {
useEffect(() => {
graphInit();
}, [props.collapsed]);
});
2.3 父子交互特殊props
父组件
const BasicLayout: React.FC = (props) => {
const [collapsed, setCollapsed] = useState<boolean>(false);
const layoutcontent: any = useRef(null); // 子组件tree-ref
const getCollapsedF = () => {
return layoutcontent.current;
};
const setCollapsedF = () => {
setCollapsed(!collapsed);
layoutcontent.current = !collapsed;
};
return (
<div style={{ minWidth: 'auto' }}>
{/* {children} */}
{
React.Children.map(props.children, (child: any) => {
return React.cloneElement(child, {
getCollapsedF: getCollapsedF,
setCollapsedF: setCollapsedF,
collapsedF: layoutcontent.current,
});
});
}
</div>
)
}
子组件Children：
interface InquireProps {
ref: any;
collapsedF: any;
getCollapsedF: any;
}
const TreeMap: React.FC<InquireProps> = forwardRef((props, ref) => {
useEffect(() => {
TpWatermark(userInfo.login, '170', '400', '-20', '#999', '20', '.15');// 添加水印
let one = window.addEventListener('scroll', scorePOI, true); //监听滚动条变化
}, []);
function scorePOI() { // 根据父组件折叠状态去设置屏幕滚动时fixed布局的定位
if (window.scrollY > 374) {
setTreeClass('Fixed-Tree');
if (props.getCollapsedF()) {
// layouts收起
setTreeClass('Fixed-Tree2');
} else {
setTreeClass('Fixed-Tree');
}
setJumpTopClass('jump-top');
} else {
setTreeClass('Block-Tree');
setJumpTopClass('jump-top-n');
}
}
});
