1. 盒子定位方式

1. 首先研究前端页面整体布局，框架样式相同的盒子可以共用样式，如下：将子组件包裹起来
   
2. 盒子大小、盒子位置集中放在一个文件中，按需获取使用

// config.js 文件中编写并export
export const BASE_INFO_TRANSLATE = { left: 1500, top: 100 }; // 数据共享状态
export const BASE_INFO_SIZE = { width: 434, height: 338 }; // 节点状态/CPU/内存/存储基础信息展示宽高
1
2
3

静态样式数据的使用

// 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>
1
2
3
4
5
6
7
8
9
10
11

// CommonBg组件中获取参数给到style样式
function CommonBg({
  commonStyle = {},
}) {
  return (
    <div style={{ ...commonStyle }} className={styles.commonBg}>
1
2
3
4
5
6

父组件传set方法给子组件修改状态值

子组件修改父组件中的状态值，再传给子组件，在子组件中使用

setHighBtn方法传给子组件

// index.jsx
const [highBtn, setHighBtn] = useState("service");

<BtnComp setHighBtn={setHighBtn} highBtn={highBtn} mapTotal={mapTotal} />
1
2
3
4

绑定事件触发方法，传值。父组件的值动态变动

export default ({ setHighBtn, highBtn, mapTotal }) => {
  const onBtnClick = useCallback(
    (v) => {
      setHighBtn(v);
    },
    [setHighBtn]
  );
 }
1
2
3
4
5
6
7
8