React+Typescript如何将文件A的state值传入文件B修改Material UI样式边距

1. 状态提升到公共父组件（文件B的Ba组件） #

你之前把边距状态定义在Aa组件内部，只有Aa的子组件能访问该状态，同级的Ab/Ca/Da自然无法同步获取。将状态迁移到所有需要该状态的组件的公共父组件Ba中，再通过props透传给对应子组件即可：

// 文件B
import { useState } from 'react';
import { Aa } from './文件A的路径';
import { Ab, Ca, Da } from './对应组件路径';
import { makeStyles } from '@material-ui/core/styles';

// makeStyles支持接收props动态生成样式
const useStyles = makeStyles((theme) => ({
  appBar: (props: { marginValue: number }) => ({
    marginLeft: props.marginValue
  })
}))

export function Ba() {
  // 边距状态提升到父组件统一管理
  const [marginValue, setMarginValue] = useState(100);
  // 将状态传入样式生成函数，实现动态边距
  const classes = useStyles({ marginValue });

  return (
    <>
      {/* 把状态和修改状态的方法传给Aa，供导航栏切换时更新边距 */}
      <Aa setMarginValue={setMarginValue} marginValue={marginValue}/>
      <Ab value={marginValue}/>
      <div className={classes.appBar}>
        <Ca/>
      </div>
      <Da/>
    </>
  )
}

2. 调整文件A的Aa组件逻辑 #

删除Aa内部原本的本地边距状态，改用父组件传入的props：

// 文件A
import { Dispatch, SetStateAction } from 'react';

// 定义组件props类型，避免使用any
type AaProps = {
  marginValue: number;
  setMarginValue: Dispatch<SetStateAction<number>>;
}

export function Aa({ marginValue, setMarginValue }: AaProps) {
  // 导航栏切换触发的逻辑，按你实际需求修改边距值即可
  const handleNavToggle = (isNavOpen: boolean) => {
    setMarginValue(isNavOpen ? 240 : 0)
  }

  return (
    <div>
      {/* 原导航栏代码，绑定toggle事件即可 */}
      <div>{marginValue}</div>
    </div>
  )
}

type AbProps = {
  value: number;
}
export function Ab({ value }: AbProps) {
  // 测试用p标签可直接删除，按实际需求写业务逻辑即可
  return <></>
}

补充说明 #

如果后续组件层级变深，逐层传props比较繁琐，可以改用React Context API做全局状态共享，当前浅层级场景下状态提升是最简单高效的方案。如果你使用的是MUI v5版本，更推荐用styled组件或者sx prop实现动态样式，逻辑和上述方案一致，将状态作为参数传入即可。

内容的提问来源于stack exchange，提问作者Sun