在React On Rails中使用Material UI

我嘗試將Material UI導入到React On Rails項目中。在React On Rails中使用Material UI

一切都是好的，但僅僅只有模塊RaisedButton不能使用，

每次我嘗試導入RaisedButton，我會得到像圖片中的錯誤消息。我的代碼是下面：

import ReactOnRails from 'react-on-rails'; 
import PropTypes from 'prop-types'; 
import React from 'react'; 
import { createStore, combineReducers, applyMiddleware } from 'redux'; 
import { Provider } from 'react-redux'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import RaisedButton from 'material-ui/RaisedButton'; 

const App =() => (
    <MuiThemeProvider> 
     <RaisedButton label="hi"/> 
    </MuiThemeProvider> 
) 

ReactOnRails.register({ 
    App, 
});

UPDATE

程序hello_world/index.html.erb：

<h1>Hello World</h1> 
<%= react_component("App", props: @hello_world_props, prerender: false) %>

佈局/ hello_world.html.erb：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>ReactOnRailsWithWebpacker</title> 
    <%= csrf_meta_tags %> 

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_pack_tag 'webpack-bundle' %> 
    </head> 

    <body> 
    <%= yield %> 
    </body> 
</html>

我該如何解決它？或者它只是React On Rails Gem中的錯誤？

來源

2017-09-03 Champer Wu

你能顯示你的佈局文件嗎？ – Panther

@Panther你主要'DOM'？ –

您的「rails」佈局文件。 – Panther

我想我找到了問題，我看到node_module/material-ui/RaisedButton/RaisedButton.js文件

return _react2.default.createElement(
     _Paper2.default, 
     { 
      className: className, 
      style: (0, _simpleAssign2.default)(styles.root, style), 
      zDepth: this.state.zDepth 
     }, 
     _react2.default.createElement(
      _EnhancedButton2.default, 
      (0, _extends3.default)({}, other, buttonEventHandlers, { 
      ref: 'container', 
      disabled: disabled, 
      style: (0, _simpleAssign2.default)(styles.button, buttonStyle), 
      focusRippleColor: mergedRippleStyles.color, 
      touchRippleColor: mergedRippleStyles.color, 
      focusRippleOpacity: mergedRippleStyles.opacity, 
      touchRippleOpacity: mergedRippleStyles.opacity 
      }), 
      _react2.default.createElement(
      'div', 
      { 
       ref: 'overlay', 
       style: prepareStyles((0, _simpleAssign2.default)(styles.overlay, overlayStyle)) 
      }, 
      enhancedButtonChildren 
     ) 
     ) 
    );

在這段代碼中，有與obj關鍵ref，我刪除ref，而不會出現錯誤。

來源

2017-09-03 20:32:18

你可以向material-ui github存儲庫打開一個問題嗎？謝謝 –

在React On Rails中使用Material UI

回答

相關問題