不適用於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組件

回答

相關問題