Question

我有以下代码段，它在浏览器窗口中根本不显示任何内容。你能告诉我原因吗。

render(){ 
    return (
        <div>
            //Rama
            //console.log('In Render'),  
            <div>
                enter code here    
                <div>
                    <TextField    
                        hintText="Username"     
                    />
                    <br/>    
                    <TextField  
                        hintText="Password"    
                    />
                    <br/>

                    <RaisedButton label="Login" primary={true}  />  
                </div>
            <div>
            <TextField>Login Successful</TextField> 
            </div>
        </div>
    )  
}

完整组件的

pastebin链接：http://pastebin.com/etjUwvWT

Answer 1

要呈现material-ui个组件，您需要将它们包装在MuiThemeProvider中。

按DOC：

从v0.15.0开始，Material-UI组件需要一个主题提供。启动和运行的最快方法是使用 MuiThemeProvider将主题注入您的应用程序上下文。

如何使用这些组件？

首先使用此行导入MuiThemeProvider：

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

使用此渲染方法：

render(){  
    return (
        <MuiThemeProvider muiTheme={getMuiTheme()}>
            <div>
                <div>
                    <TextField
                        hintText="Username"
                    />
                    <br/>
                    <TextField
                        hintText="Password"
                    />
                    <br/>
                    <RaisedButton label="Login" primary={true}  />
                </div>
                <div>
                    <TextField/>
                </div> 
            </div>
        </MuiThemeProvider>
    );
}

如果您在整个项目中使用material-ui组件，则无需在每个页面上使用MuiThemeProvider，您也可以全局包含它。将其包含在路由器中或将此行放在应用程序的主页上。

您只需要导入injectTapEventPlugin，还需要初始化它。导入后将此行放在此组件中：

injectTapEventPlugin();

Answer 2

看起来你的JSX代码中有JS-comments（//）。这会让事情破裂。

如果你想在JSX中注释一些东西，你必须用大括号转入JS，然后使用多行注释（/* comment */） - 就像这样：

render() {
  return (
    <div>
      {/* <button>Commented out button</button>*/}
    </div>
  );
}

Answer 3

从TextField标记之间删除文字。还要在MuiThemeProvider之间的渲染方法中包装代码。这对我有用。

render(){
  return (
      <MuiThemeProvider>
        <div>
            <div>
              <TextField
                hintText="Username"
              /><br/>
              <TextField
                hintText="Password"
              /><br/>

              <RaisedButton label="Login" primary={true}  />
            </div>

            <div> 
              <TextField></TextField>
            </div>
        </div>
      </MuiThemeProvider>

   ); 
}

材料UI组件在React中不起作用

3 个答案: