如何在Web Forms应用中集成Material UI组件？Button组件无法渲染

我帮你找到了问题所在——你在使用UMD版本的Material UI时，没有正确引用Button组件！

当通过UMD脚本引入Material UI时，所有组件都挂载在全局的MaterialUI对象下，你直接使用<Button>会导致React无法识别这个组件，因为它并没有被定义到当前作用域中。

修正方案 #

你只需要从全局的MaterialUI对象中获取Button组件即可，有两种方式实现：

方式1：解构赋值获取组件

在你的babel脚本开头添加解构代码，把Button组件引入当前作用域：

const { Button } = MaterialUI;

方式2：直接使用全局对象调用组件

无需额外声明，直接在JSX中使用全局对象的属性：

<MaterialUI.Button variant={prop1} color={prop2}>Hello World</MaterialUI.Button>

完整修正后的代码示例 #

下面是第一种方式的完整可运行代码：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js"></script>
<script type="text/babel">
  const { Button } = MaterialUI;
  var prop1 = 'contained'; 
  var prop2 = 'primary'; 
  ReactDOM.render(
    <Button variant={prop1} color={prop2}>Hello World</Button>, 
    document.getElementById('test')
  );
</script>

额外提示 #

• 如果你是在生产环境部署，建议把React和ReactDOM的development版本换成production版本，减少文件体积并提升性能。
• 你当前使用的babel-standalone版本比较旧（6.15.0），可以考虑更新到较新的@7.x版本，以获得更好的兼容性和新特性支持。

内容的提问来源于stack exchange，提问作者M.Code