React-Style、Webpack、React - 未捕获的错误:不变违规:`style` 道具 [英] React-Style, Webpack, React - Uncaught Error: Invariant Violation: The `style` prop

问题描述

我的浏览器出现以下错误:

<块引用>

未捕获的错误:不变违规:style 道具需要从样式属性到值的映射，而不是字符串.例如，使用 JSX 时 style={{marginRight: spatial + 'em'}}.

这是在运行 webpack-dev-server 并转到 localhost:8080 时.

./modules/main.js:

/** @jsx React.DOM */var React = require('react');var HoverAction = require('./HoverAction/HoverAction');var Application = React.createClass({渲染:函数(){返回 (<div><HoverAction title="收藏夹"/>

);}});如果(窗口类型！== '未定义'){React.render(, document.getElementById('app'));}

./modules/HoverAction/HoverActions.js:

/** @jsx React.DOM */'使用严格';var StyleSheet = require('react-style');var React = require('react');var HoverActionStyles = StyleSheet.create({普通的: {高度:'200px'，宽度:'200px'，边框:'1px纯黑色'}});var HoverActionTitleStyle = StyleSheet.create({普通的: {文本对齐:'居中'，字体大小:'10px'}});var HoverAction = React.createClass({渲染:函数(){返回 (<div style={HoverActionStyles.normal}><div ></div><div style={HoverActionTitleStyle.normal} >{this.props.title}</div>

);}});module.exports = HoverAction;

index.html:

<头><link rel="stylesheet" href="bundle.css"><身体><div id="应用程序"></div><script src="bundle.js"></script></html>

webpack.config.js:

'use strict';var ReactStylePlugin = require('react-style-webpack-plugin');var ExtractTextPlugin = require('extract-text-webpack-plugin');var webpack = require('webpack');模块.出口 = {开发工具:'源图'，条目:'./modules/main.js',输出: {文件名:'bundle.js',},模块: {装载机: [{测试:/\.js$/,装载机: [ReactStylePlugin.loader(),'jsx-loader?和谐']},{测试:/\.less$/,loader: 'style-loader!css-loader!less-loader'},{测试:/\.css$/,loader: ExtractTextPlugin.extract('css-loader')//loader: 'style-loader!css-loader'},{测试:/\.(png|jpg)$/,loader: 'url-loader?limit=8192'}//<=8k 图像的内联 base64 URL，其余图像的直接 URL]},插件: [new ReactStylePlugin('bundle.css'),新的 webpack.DefinePlugin({'process.env':{//启用生产模式://NODE_ENV: JSON.stringify('production')}})]};

package.json:

<代码>{"name": "webpack-howto-example","版本": "1.0.0",描述": ""，"main": "index.js",脚本":{"start": "webpack-dev-server","test": "echo \"Error: no test specified\" && exit 1"},作者": ""，"license": "ISC",开发依赖":{"bundle-loader": "^0.5.4","css-loader": "^0.12.0","文件加载器": "^0.8.1","jsx-loader": "^0.13.2","少": "^2.5.0","less-loader": "^2.2.0","反应式": "^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"},依赖关系":{反应":^0.13.2"，反应路由器":^0.13.2"}}

解决方案

React Style 要求你使用 styles 属性而不是 style.

var HoverAction = React.createClass({渲染:函数(){返回 (<div 样式={HoverActionStyles.normal}><div ></div><div 样式={HoverActionTitleStyle.normal} >{this.props.title}</div>

);}});

I'm getting the following error in my browser:

Uncaught Error: Invariant Violation: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

This is when running webpack-dev-server and going to 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 requires you to use the styles prop instead of style.

var HoverAction = React.createClass({
    render: function() {
        return (
            <div styles={HoverActionStyles.normal}>
                <div ></div>
                <div styles={HoverActionTitleStyle.normal} >{this.props.title}</div>
            </div>
        );
    }
});

这篇关于React-Style、Webpack、React - 未捕获的错误:不变违规:`style` 道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！