Prime React 9.6.2：如何用PrimeReactContext替代旧版主题配置方法

1. 基础准备：导入并获取PrimeReactContext #

首先在组件中导入PrimeReactContext和React的useContext钩子，获取上下文提供的方法：

import { useContext } from 'react';
import { PrimeReactContext } from 'primereact/api';

// 组件内部获取上下文方法
const { changeTheme, updateConfig } = useContext(PrimeReactContext);

2. 替换changeTheme调用 #

原全局PrimeReact.changeTheme直接替换为上下文提供的changeTheme方法，回调函数逻辑完全保留（仅更新你的本地layoutConfig状态，无需修改）：

// 修改颜色主题
changeTheme(layoutConfig.colorScheme, datacolorScheme, 'theme-link', () => {
  setLayoutConfig((prevState) => ({ ...prevState, datacolorScheme }));
});

// 修改主题样式
changeTheme(layoutConfig.theme, datatheme, 'theme-link', () => {
  setLayoutConfig((prevState) => ({ ...prevState, datatheme }));
});

3. 替换全局PrimeReact.ripple设置 #

原直接修改全局PrimeReact.ripple的方式，改用上下文的updateConfig方法更新PrimeReact配置，同时保留本地状态更新逻辑：

const isRippleEnabled = data.ripple === 'true';
// 更新PrimeReact的ripple全局配置
updateConfig({ ripple: isRippleEnabled });
// 更新本地layoutConfig状态
setLayoutConfig((prevState) => ({ ...prevState, ripple: isRippleEnabled }));

4. 保留原有布局状态更新逻辑 #

缩放设置、菜单重置属于你的应用本地状态操作，无需适配PrimeReactContext，直接保留原有逻辑即可：

// 更新缩放配置
setLayoutConfig((prevState) => ({
  ...prevState,
  scale: layoutConfig.scale
}));
document.documentElement.style.fontSize = layoutConfig.scale + 'px';

// 符合条件时重置菜单
if (isSlim() || isHorizontal() || isCompact()) {
  setLayoutState((prevState) => ({ ...prevState, resetMenu: true }));
}

完整整合代码 #

将上述部分整合后的完整逻辑示例：

import { useContext } from 'react';
import { PrimeReactContext } from 'primereact/api';

// 组件内部的配置更新函数
const updateLayoutSettings = () => {
  // 修改颜色主题
  changeTheme(layoutConfig.colorScheme, datacolorScheme, 'theme-link', () => {
    setLayoutConfig((prevState) => ({ ...prevState, datacolorScheme }));
  });

  // 修改主题样式
  changeTheme(layoutConfig.theme, datatheme, 'theme-link', () => {
    setLayoutConfig((prevState) => ({ ...prevState, datatheme }));
  });

  // 修改ripple配置
  const isRippleEnabled = data.ripple === 'true';
  updateConfig({ ripple: isRippleEnabled });
  setLayoutConfig((prevState) => ({ ...prevState, ripple: isRippleEnabled }));

  // 更新缩放设置
  setLayoutConfig((prevState) => ({
    ...prevState,
    scale: layoutConfig.scale
  }));
  document.documentElement.style.fontSize = layoutConfig.scale + 'px';

  // 重置菜单（符合条件时）
  if (isSlim() || isHorizontal() || isCompact()) {
    setLayoutState((prevState) => ({ ...prevState, resetMenu: true }));
  }
};

内容的提问来源于stack exchange，提问作者Samet Dağ