Javascript 如何在与材料iu反应中使用对话框

我需要使用带有react material ui的对话框确认，但它不起作用 这就是错误：

错误：MuiThemeProvider.render:必须有有效的React元素或null 被退回。您可能返回了未定义、数组或其他类型 无效对象

这是我的代码：

import React from 'react';
import ReactDom from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import ActionFace from 'material-ui/svg-icons/action/face';
import CommunicationVpnKey from 'material-ui/svg-icons/communication/vpn-key';


const style = {
  margin: 5
};
const iconStyles = {
  marginRight: 5,
};
export default class DialogExampleSimple extends React.Component  {
  state = {
    open: false,
  };

  handleOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
    console.log(this.context);
  };

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        keyboardFocused={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (
      <div>
        <RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
        <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
          The actions in this window were passed in as an array of React objects.
        </Dialog>
      </div>
    );
  }
}


class App extends React.Component {

    render() {
    return (

        <MuiThemeProvider>
        <Card shadow={0} style={{width: '550px',margin: 'auto'}}>

            <CardMedia
          overlay={<CardTitle title="ssa.net" subtitle="Inicio de sesion" />}
            >
            <img  src="{% static 'src/img/ttr.jpg' %}" height="250px" />
            </CardMedia>
            <CardText>
                <div>
                <ActionFace style={iconStyles} />
                <TextField
                hintText="Ingrese su codigo"
                floatingLabelText="Codigo de acceso"
                fullWidth={false}
                />
                </div>
                <div>
                <CommunicationVpnKey style={iconStyles} />
                <TextField
                hintText="Ingrese su clave"
                floatingLabelText="Clave de acceso"
                type="password"
                fullWidth={false}
                /></div>
              </CardText>
             <CardActions>
                  <FlatButton label="Acceder"  primary={true} style={style}/>
                  <FlatButton label="Registro"  primary={true} style={style} />
                  <FlatButton label="Olvide mi acceso" secondary={true} style={style}/>
             </CardActions>
             </Card>
              <DialogExampleSimple />
      </MuiThemeProvider>
        );
    }
}

ReactDom.render(<App/>,document.getElementById('app'));

只需要有一个子元素，在您的例子中，它有两个子元素-a和a

如果要同时渲染它们，需要将它们包装在父组件中，如MuiThemeProvider可以有唯一的子组件，不能渲染多个元素，因此，不要在应用程序组件中使用MuiThemeProvider，而是在MuiThemeProvider中渲染案例中的主组件App

使用以下命令：

ReactDom.render(<MuiThemeProvider>
                    <App/> 
                <MuiThemeProvider/>,
                document.getElementById('app')
);

并从App component中删除标记，对App component使用以下代码：

class App extends React.Component {
  render() {
    return (
      <div>
        <Card shadow={0} style={{width: '550px',margin: 'auto'}}>

            <CardMedia
              overlay={<CardTitle title="ssa.net" subtitle="Inicio de sesion" />}
            >
              <img  src="{% static 'src/img/ttr.jpg' %}" height="250px" />
            </CardMedia>
            <CardText>
                <div>
                <ActionFace style={iconStyles} />
                <TextField
                hintText="Ingrese su codigo"
                floatingLabelText="Codigo de acceso"
                fullWidth={false}
                />
                </div>
                <div>
                <CommunicationVpnKey style={iconStyles} />
                <TextField
                hintText="Ingrese su clave"
                floatingLabelText="Clave de acceso"
                type="password"
                fullWidth={false}
                /></div>
            </CardText>
            <CardActions>
                  <FlatButton label="Acceder"  primary={true} style={style}/>
                  <FlatButton label="Registro"  primary={true} style={style} />
                  <FlatButton label="Olvide mi acceso" secondary={true} style={style}/>
            </CardActions>
          </Card>
          <DialogExampleSimple />
        </div>
      );
    }
}