不适用于React的材质UI组件

我有以下代码片段，它在浏览器窗口中根本不显示任何内容。你能告诉我为什么。不适用于React的材质UI组件

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

来源

2017-02-16 Ramasamy Viswanathan

您是否正在导入'TextField'，'RaisedButton'，你看到的错误是什么..，分享整个代码，而不仅仅是渲染功能。 –

控制台没有错误。 –

整个代码....从'react'导入React，{Component，PropTypes}; 从'流星/ react-meteor-data'导入{createContainer}; 从'react-dom'导入ReactDOM; 从'material-ui/AutoComplete'中导入AutoComplete; –

看起来就像你在你的JSX代码JS-评论（//）。这会让东西破裂。

如果你想在JSX评论出来的东西，你有逃避到JS用两个大括号，然后使用多行注释（/* comment */） - 像这样：

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

来源

2017-02-16 11:57:44

这并没有解决 –

删除渲染的所有评论，也请确保你已经把它全部包装在MuiThemeProvider中 - >确保你遵循Material-UI教程 – Mateusz

要渲染需要material-ui组件将它们包裹在MuiThemeProvider中。

按DOC：

与v0.15.0开始，材料的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> 
    ); 
}

如果使用在项目材料的UI组件则没有必要使用MuiThemeProvider上每个页面，你也包括全球。将其包含在您的路由器中或将此行放在应用程序的主页上。

还有一件事你只是导入injectTapEventPlugin，你还需要初始化。在导入之后将此行放入此组件中：

injectTapEventPlugin();

来源

2017-02-16 12:57:59

它不工作 –

添加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> 

    ); 
}

来源

2017-02-21 18:59:42

这有效。谢谢。 –

我很高兴我能帮上忙。你能否让我的答案标志为绿色？ –

不适用于React的材质UI组件

回答

相关问题