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

Question

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

Error: MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object

这是我的代码：

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> 只需要一个子元素，在您的情况下它有两个 - <Card> 和 <DialogExampleSimple />.

如果你想同时渲染它们，你需要将它们包裹在父组件中，例如 <div>

Answer 2

MuiThemeProvider 只能有子元素，不能 render 多个元素，所以在 App 组件中不要使用 MuiThemeProvider，render 主组件 (应用程序在你的情况下）在 MuiThemeProvider.

内

使用这个：

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

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

How use dialog in react with materal-iu

javascript

reactjs

material-ui