[英]Using Material UI in React On Rails
I tried to import Material UI into my React On Rails Project. 我试图将Material UI导入我的React On Rails项目中。
Everything is okay, but just only Module RaisedButton
can't use, 一切正常,但只有Module RaisedButton
不能使用,
Every time I try to import RaisedButton
, I will get the error message like the picture. 每次尝试导入RaisedButton
,都会收到类似图片的错误消息。 My code is below: 我的代码如下:
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: hello_world / index.html.erb:
<h1>Hello World</h1>
<%= react_component("App", props: @hello_world_props, prerender: false) %>
layouts/hello_world.html.erb: layouts / 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>
How can I fix it ? 我该如何解决? Or It's just the bug in React On Rails Gem? 还是仅仅是React On Rails Gem中的错误?
I think I find the problem, I see the node_module/material-ui/RaisedButton/RaisedButton.js
file 我想我找到了问题,我看到了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
)
)
);
In this code, there is the Obj key ref
, I delete the ref
, and the error would not appears. 在此代码中,有Obj键ref
,我删除了ref
,并且不会出现错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.