Доступ к стороннему компоненту React в приложении веб-форм - PullRequest
Новая
       7

Доступ к стороннему компоненту React в приложении веб-форм

0 голосов
/ 09 февраля 2019

Как я могу включить компонент Material UI (https://material -ui.com / Getting-Start / Use / ) в приложении веб-форм.Вот что у меня есть, но это не показывает компонент 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>

Но когда я пробую образец без ссылочного компонента пользовательского интерфейса следующим образом, это работает: 

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

1 Ответ

0 голосов
/ 09 февраля 2019

Возникает ошибка: Button не определено.

Вам необходимо добавить const {Button} = window['material-ui'];.

. Пример UMD Material-UI можно найти здесь:

https://github.com/mui-org/material-ui/blob/master/examples/cdn/index.html

Ниже приведен рабочий фрагмент с исправленной версией вашего кода. 

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