如何使用对话框与 material-ui 反应

Question

我需要通过react-material-ui 使用dialog 确认，但它不起作用 这是错误：

错误：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'));

Answer 1

MuiThemeProvider 只能有子元素，render 不能有多个元素，所以不要在 App 组件中使用 MuiThemeProvider，而是在 MuiThemeProvider 中使用 render 主要组件（在您的情况下为 App）。

使用这个：

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

并从 App 组件中删除 <MuiThemeProvider> 标签，将此代码用于 App 组件：

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>
      );
    }
}

Answer 2

<MuiThemeProvider> 需要只有一个子元素，在您的情况下它有两个 - <Card> 和 <DialogExampleSimple />。

如果你想同时渲染它们，你需要将它们包装在一个父组件中，比如<div>