Question

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

错误：MuiThemeProvider.render（）：一个有效的React元素（或null）必须被退回您可能已经返回undefined，数组或其他一些无效的对象

这是我的代码：

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，而是render主要组件（App in你的情况）在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>
      );
    }
}

Answer 2

// addRow.GS var ss = SpreadsheetApp.getActive(); function onOpen() { var menu = [{name:"Add New Last Row", functionName:"addRow"}]; ss.addMenu("Extra", menu); } function addRow() { var s, data, rw; s=SpreadsheetApp.getActiveSheet(); data=s.getDataRange().getValues(); for (rw in data) { if (data[rw][6]=="Condition Description :") break; } s.insertRowBefore(Number(rw)); s.getRange(Number(rw), 4, 1, 2).merge(); s.getRange(Number(rw), 8).setFormula("=f"+Number(rw)+"*g"+Number(rw)); } function myFunction() //Code.GS { var ss = SpreadsheetApp.getActive(); function onOpen() { var menu = [{name:"Add New Last Row", functionName:"addFirstRow"}]; ss.addMenu("Extra", menu); } function addFirstRow() { var firstRow = 1; var sh = ss.getActiveSheet(); var lCol = sh.getLastColumn(); var range = sh.getRange(firstRow, 1, 1, lCol); var formulas = range.getFormulas(firstRow, 1, 1, lCol); sh.insertRowsAfter(1, 1); newRange = sh.getRange(firstRow, 1, 1, lCol); newRange.setFormulas(formulas); } }只需要一个子元素，在您的情况下，它有两个 - <MuiThemeProvider>和<Card>。

如果要同时渲染它们，则需要将它们包装在父组件中，如<DialogExampleSimple />

如何使用对话框与materal-iu作出反应

2 个答案: