个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我的浏览器中出现以下错误:
Uncaught Error: Invariant Violation: The
styleprop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
这是运行 webpack-dev-server 并转到 localhost:8080 时的情况。
./modules/main.js:
/** @jsx React.DOM */
var React = require('react');
var HoverAction = require('./HoverAction/HoverAction');
var Application = React.createClass({
render: function() {
return (
<div>
<HoverAction title="favorite" />
</div>
);
}
});
if (typeof window !== 'undefined') {
React.render(<Application />, document.getElementById('app'));
}
./modules/HoverAction/HoverActions.js:
/** @jsx React.DOM */
'use strict';
var StyleSheet = require('react-style');
var React = require('react');
var HoverActionStyles = StyleSheet.create({
normal: {
height: '200px',
width: '200px',
border: '1px solid black'
}
});
var HoverActionTitleStyle = StyleSheet.create({
normal: {
textAlign: 'center',
fontSize: '10px'
}
});
var HoverAction = React.createClass({
render: function() {
return (
<div style={HoverActionStyles.normal}>
<div ></div>
<div style={HoverActionTitleStyle.normal} >{this.props.title}</div>
</div>
);
}
});
module.exports = HoverAction;
index.html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="bundle.css">
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
webpack.config.js:
'use strict';
var ReactStylePlugin = require('react-style-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
module.exports = {
devtool: 'sourcemap',
entry: './modules/main.js',
output: {
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
loaders: [
ReactStylePlugin.loader(),
'jsx-loader?harmony'
]
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader')
// loader: 'style-loader!css-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
} // inline base64 URLs for <=8k images, direct URLs for the rest
]
},
plugins: [
new ReactStylePlugin('bundle.css'),
new webpack.DefinePlugin({
'process.env': {
// To enable production mode:
// NODE_ENV: JSON.stringify('production')
}
})
]
};
package.json:
{
"name": "webpack-howto-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"bundle-loader": "^0.5.4",
"css-loader": "^0.12.0",
"file-loader": "^0.8.1",
"jsx-loader": "^0.13.2",
"less": "^2.5.0",
"less-loader": "^2.2.0",
"react-style": "^0.5.5",
"react-style-webpack-plugin": "0.4.0",
"style-loader": "^0.12.1",
"url-loader": "^0.5.5",
"webpack": "^1.8.10",
"webpack-dev-server": "^1.8.2"
},
"dependencies": {
"react": "^0.13.2",
"react-router": "^0.13.2"
}
}
最佳答案
React Style 要求您使用 styles 属性而不是 style。
var HoverAction = React.createClass({
render: function() {
return (
<div styles={HoverActionStyles.normal}>
<div ></div>
<div styles={HoverActionTitleStyle.normal} >{this.props.title}</div>
</div>
);
}
});
关于reactjs - React 风格、Webpack、React - 未捕获错误 : Invariant Violation: The `style` prop，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29921093/
26
4
0
我正在为学校做作业。该代码应该从文件中读取并创建一个数组，然后对数组的值进行排序以输出某些信息。只要我在文件中有 3 行以上的信息，它就可以正常工作。如果没有，我会收到以下错误: First-chan
在我的表中，我有一个唯一的约束。在 hibernate 中，当我添加一个违反该约束的项目时，我想捕获它，因此它将更新而不是创建一个项目。 当我没有设置 try-catch block 时 up
我正在尝试将 Excel 文件中的一些数据插入到表中。我有两个excel文件如下: Test2: 5/12/2012 5/18/2012 ABQ ANC 1 52 5/12/2012
我有自定义约束: @Target({FIELD, METHOD}) @Retention(RetentionPolicy.RUNTIME) @ConstraintComposition(Composi
“违反任何时间序列”和“违反所有时间序列”这两个选项有什么区别？我可以想象前者会轻松做什么，但我不知道后者会做什么。 所有时间序列？它的射程有多长？为什么它有一个 for 选项？ 最佳答案 What'
我正在尝试初始化 DataEditor 的对象，我的DataEditor类(class)工具interface IDataEditor where T : IEditableObject . Data
我正在使用带有 java 插件 4.0 和 findbugs 插件 3.4.3 的 SonarQube 5.6。使用此配置，findbugs 报告的外部类违规不会被报告为 Sonar 违规。以下是代码
我正在使用 DbUnit 框架对我的 JPA 实体 bean 进行单元测试。我已经从数据库表生成了实体。还将 DB 数据导出到 xml 文件中，DbUnit 在执行测试时可以使用这些文件。 但是对于每
我写了这段简单的代码来动态分配一个 4 维数组: #include #include int**** alloc() { int i,j,k; int ****matrix;
我的 Java 程序出现问题。我使用 MS Access 作为数据库，并使用 UCanAccess 连接到数据库。 当我尝试将文本插入数据库时，出现异常: net.ucanaccess.jdbc.
我正在尝试使用埃拉托斯特尼筛法解决 SPOJ 的 PRIME1 问题。该代码对于较小的整数工作正常，但对于长整数显示以下错误 - "Unhandled exception at 0x770d15ee
我不明白这个案例，但这对我来说真的很重要，请帮助我... void __fastcall TForm1::Button4Click(TObject *Sender) { String masu
请看我的代码: adj = (int *)calloc(n * n, sizeof(int)); scanf("%d", &m); for (i = 0; i < m; i++) { scan
下面这段代码有什么问题以及如何修复它。 #include using namespace std; template class guard{ public: guard(Func1 firs
我有一个多线程 C# 应用程序，它创建文件，打开它们进行处理，然后在完成后删除它们。此应用程序可以预期处理 1 - 100 个文件。有点随机(很可能归因于应用程序的多线程性质)当我尝试在处理后删除文件
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题. 关闭 8 年前。 Improve t
是否有可能在出现段错误后恢复 C 程序的正常执行流程？ struct A { int x; }; A* a = 0; a->x = 123; // this is where segmenta
在 Magento 中使用信用卡/借记卡下订单时出现以下错误: Order saving error: SQLSTATE[23000]: Integrity constraint violation:
我正在处理属于 SDK 一部分的文件。当我在 phpstorm 中将文件提交到 svn 时，我收到关于 Unused definition SomeFunction 的警告，其中 SomeFuncti
简而言之，我有一个 C# 应用程序执行大量 mciSendString 调用(通过 dllimport)来控制 wav 文件播放(本质上是打开、播放、暂停、停止、状态、关闭)。运行一段时间后，应用程序
我是一名优秀的程序员,十分优秀！