Question

错误是：MuiThemeProvider（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null。我对材料ui不熟悉，所以我打开了终端并打开了rad'npm i --save-dev material-ui'，它安装并说了一些有关更新的内容。然后我在myc1.js中编写了代码，在app.js中导入了，这是我来自webstorm的两个代码文件：

app.js：

import React, { Component } from 'react';
import './App.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import CoolButton from './components/myc1.js';

class App extends Component {
    constructor() {
        super();
        this.state = {
            inp: 'Hello type your text here',
            gender: 'm',
            textInput: ''
        }
    }
    handleSubmit (event){
         console.log('form has been submitted');
            event.preventDefault();
    }
    handleChange (e){
        console.log('in input there is: '+e.target.value);
        this.setState({textInput: e.target.value})
    }
  render() {
            const change = () => {
                this.setState({inp: this.refs.var.value });
            };
      return (
        <div className="App">
          <input ref="var1" value={this.state.inp} onChange={
              change
          }/>
          <br />
          Gender: Male
          <input type='radio' name="Gender"
                 onChange={()=> this.setState({gender: 'm'}) }
                 checked={ this.state.gender === 'm'}
          />
          Female
          <input type='radio' name="Gender"
                        onChange={()=> this.setState({gender: 'f'}) }
                        checked={ this.state.gender === 'f'}
      />
          {this.state.gender}
          <form onSubmit={App.handleSubmit}>
              <input onChange={this.handleChange.bind(this)}/>
              <button type="submit">Send</button>
          </form>
            <MuiThemeProvider />
          <CoolButton/>
                <MuiThemeProvider/>
      </div>
    );
  }
}

export default App;

这是myc1.js：

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const CoolButton = () => (
<RaisedButton label="Default" />

);

export default CoolButton;

Answer 1

我认为不是：

 <MuiThemeProvider />
   <CoolButton/>
 <MuiThemeProvider/>

您想要的：

<MuiThemeProvider>
  <CoolButton/>
</MuiThemeProvider>

尝试获取MuiThemeProvider会给出错误

1 个答案: