在浏览器中结合React使用Ant Design的报错与实现求助

我来帮你搞定这个问题，你碰到的两个报错其实都是浏览器环境中使用Ant Design v3时的常见问题，下面分点说明原因和解决方案：

1. ReferenceError: Button is not defined 的解决 #

Ant Design的UMD打包版本（就是你用的antd.min.js）并没有把Button、Panel这些组件直接暴露为全局变量，而是把所有组件挂载到了全局的antd对象上。所以你不能直接写Button，得改成antd.Button来引用组件。

2. Uncaught TypeError: ef(...) is not a function 的解决 #

这个错误是因为Ant Design v3的UMD包依赖几个React生态的辅助库，这些库需要在浏览器中作为全局变量存在，而你之前的代码里没有引入它们：

• prop-types：Ant Design组件依赖它做属性校验
• react-is：用于React组件类型判断，Ant Design内部会用到
• （可选）moment.js：如果使用日期相关组件（比如DatePicker）必须引入，用Button的话可以不加，但加上也不影响

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React and Ant Design browser example</title>
    <!-- 引入Ant Design样式 -->
    <link rel="stylesheet" href="https://unpkg.com/antd@3.23.1/dist/antd.min.css"/>
</head>
<body>
    <div id="like_button_container"></div>

    <!-- 先引入React相关依赖 -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
    <!-- 引入Ant Design依赖的辅助库 -->
    <script src="https://unpkg.com/prop-types@15.7.2/prop-types.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-is@16.13.1/umd/react-is.production.min.js" crossorigin="anonymous"></script>
    <!-- （可选）如果用日期组件需要引入moment -->
    <script src="https://unpkg.com/moment@2.29.4/moment.min.js" crossorigin="anonymous"></script>
    <!-- 引入Ant Design的UMD包 -->
    <script src="https://unpkg.com/antd@3.23.1/dist/antd.min.js" crossorigin="anonymous"></script>

    <script>
        'use strict';
        const e = React.createElement;

        class LikeButton extends React.Component {
            constructor(props) {
                super(props);
                this.state = { liked: false };
            }

            render() {
                if (this.state.liked) {
                    return 'You liked this.';
                }
                // 这里改成antd.Button引用组件
                return e(
                    antd.Button,
                    { onClick: () => this.setState({ liked: true }), type: 'primary' },
                    'Like'
                );
            }
        }

        let domContainer = document.querySelector('#like_button_container');
        ReactDOM.render(e(LikeButton), domContainer);
    </script>
</body>
</html>

额外说明 #

虽然这种浏览器直接引入的方式能解决问题，但正如Ant Design文档所说，这种方式并不推荐用于生产环境：

• 无法按需加载，会引入整个Ant Design库，体积较大
• 没有构建工具的支持，无法使用JSX语法（只能用React.createElement）
• 后续维护和扩展起来比较麻烦

如果你的项目是ASP.NET Core结合Razor页面，其实可以考虑把Razor页面需要的React组件打包成独立的UMD包，然后在页面中引入，这样既能统一样式，又能获得更好的开发体验。

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