Question

如何在Web窗体应用程序中合并Material UI组件（https://material-ui.com/getting-started/usage/）。以下是我所拥有的，但未显示Button组件

我有一个ASPX文件，我正在使用UMD如下添加对React，Material UI和babel的引用：

<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">

var prop1 = 'contained';
var prop2 = 'primary';

ReactDOM.render (
     <Button variant = {prop1} color = {prop2}> Hello World </Button>,
            document.getElementById('test')
     ); 

</script>

但是当我尝试不使用以下引用的UI组件的示例时，此方法有效：

<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">

class Greeting extends React.Component {
        render() {
            return (<p>Hello world</p>);
        }
    }
ReactDOM.render(
        <Greeting />, 
     document.getElementById('test')
    );

</script>

Answer 1

发生的错误是未定义Button。

您需要添加const {Button} = window['material-ui'];。

您可以在此处找到UMD Material-UI示例：

.serialize() here

下面是带有固定版本代码的有效代码段。

<div id="test">

</div>
<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">

var prop1 = 'contained';
var prop2 = 'primary';
const {Button} = window['material-ui'];
ReactDOM.render (
     <Button variant = {prop1} color = {prop2}> Hello World </Button>,
            document.getElementById('test')
     ); 

</script>

访问Web表单应用程序中的第三方React组件

1 个答案: