reactjs - 尝试获取 MuiThemeProvider 会出错

Question

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

应用程序.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;

标签： reactjsreact-nativematerial-ui

Answer 1

我认为而不是：

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

你要：

<MuiThemeProvider>
  <CoolButton/>
</MuiThemeProvider>