React函数组件转类组件：theme.useToken与Layout.Content转换咨询

1. 处理theme.useToken()获取主题令牌 #

函数组件中的useToken是React Hook，类组件无法直接调用，需要借助Ant Design提供的withTheme高阶组件将主题对象注入组件props，之后就能在render方法中获取主题令牌：

• 首先导入withTheme：

import { withTheme } from 'antd';

• 用withTheme包裹类组件的导出语句：

export default withTheme(ProductDetail);

• 在render方法中获取令牌：

render() {
  const { colorBgContainer } = this.props.theme.token;
  // 后续业务代码中直接使用colorBgContainer即可
}

如果需要监听主题动态变化，可以在componentDidUpdate生命周期中处理令牌更新逻辑。

2. 处理const { Content } = Layout; #

这属于模块属性解构，和组件类型无关，有两种简洁的处理方式：

方案一：组件外部解构（推荐，仅执行一次） #

在导入Layout后直接解构，写在类组件定义之外：

import { Layout } from 'antd';
const { Content } = Layout;

class ProductDetail extends React.Component {
  render() {
    return (
      <Content>
        {/* 组件内容 */}
      </Content>
    );
  }
}

方案二：render方法内解构 #

如果仅在render中使用Content，也可以在方法内部解构：

render() {
  const { Content } = Layout;
  return (
    <Content>
      {/* 组件内容 */}
    </Content>
  );
}

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