Reactjs 物料UI组件在React中不工作

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

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

render（）{
返回(
//拉玛
//console.log（'In Render'），
在这里输入代码




登录成功
)  
}

---

pastebin

完整组件的链接：

看起来您的JSX代码中有JS注释（

/

）。那会把东西弄坏的

如果您想在JSX中注释某些内容，则必须用花括号转义到JS中，然后使用多行注释（

/*comment*/

）-如下所示：

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

render（）{
返回(
{/*注释掉按钮*/}
);
}

要呈现

材质ui

组件，您需要将它们包装在

MuiThemeProvider

中

根据：

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

---

从

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>

   ); 
}

render（）{
返回(




); 
}

您是否正在导入

文本字段

，

RaisedButton

，您看到的错误是什么..，共享整个代码而不仅仅是渲染函数。控制台中没有错误。整个代码…从“React”导入React，{Component，PropTypes}；从“meteor/react meteor数据”导入{createContainer}；从“react dom”导入react dom；从“物料界面/自动完成”导入自动完成；我可以使用PasteBin更新带有完整代码的ques:）您粘贴在ques中的代码片段，有一个div不匹配，如果您使用相同的代码，它应该会通过错误。请从渲染中删除所有注释，并确保所有注释都包装在MuiThemeProvider->确保您遵循材质UI教程。我很高兴能提供帮助。你能把我的答案标成绿色吗？

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>

   ); 
}