1. 盒子定位方式
- 首先研究前端页面整体布局,框架样式相同的盒子可以共用样式,如下:将子组件包裹起来
- 盒子大小、盒子位置集中放在一个文件中,按需获取使用
// config.js 文件中编写并export
export const BASE_INFO_TRANSLATE = { left: 1500, top: 100 }; // 数据共享状态
export const BASE_INFO_SIZE = { width: 434, height: 338 }; // 节点状态/CPU/内存/存储基础信息展示宽高
静态样式数据的使用
// index.jsx/demo 引入静态样式数据
import {BASE_INFO_TRANSLATE, BASE_INFO_SIZE } from './config'
<CommonBg
commonStyle={{ ...BASE_SIZE, ...PROVINCE_REFLUX_TREND_TRANSLATE_B }}
text="外部门共享数据"
paramsCallback={paramsCallback}
fetchType="2"
>
<CircleChart />
</CommonBg>
// CommonBg组件中获取参数给到style样式
function CommonBg({
commonStyle = {},
}) {
return (
<div style={{ ...commonStyle }} className={styles.commonBg}>
父组件传set方法给子组件修改状态值
子组件修改父组件中的状态值,再传给子组件,在子组件中使用
setHighBtn方法传给子组件
// index.jsx
const [highBtn, setHighBtn] = useState("service");
<BtnComp setHighBtn={setHighBtn} highBtn={highBtn} mapTotal={mapTotal} />
绑定事件触发方法,传值。父组件的值动态变动
export default ({ setHighBtn, highBtn, mapTotal }) => {
const onBtnClick = useCallback(
(v) => {
setHighBtn(v);
},
[setHighBtn]
);
}