React-Style, WebPACK, React - Uncaught Error: Inwariant wykroczenie: Opcja `style` prop

Dostaję następujący błąd w mojej przeglądarce:React-Style, WebPACK, React - Uncaught Error: Inwariant wykroczenie: Opcja `style` prop

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.

To kiedy uruchomiony WebPack-dev-serwer i przejście do 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" 
    } 
}

Źródło

2015-04-28 HelpMeStackOverflowMyOnlyHope

można znaleźć odpowiedź wykonując ten link: https://stackoverflow.com/a/44733640/5934465 – xgqfrms

React stylu wymaga korzystania z styles rekwizyt zamiast style.

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

Źródło

2015-04-28 13:54:45

użyłem atrybut style w JSX pliku, podobnie jak to

style={{textTransform: 'uppercase'}}

i pracował dla mnie

Źródło

2016-08-18 12:52:15

Można również ustawić obiekt typu 'style = {cssLikeStyleObj}'. Zwróć uwagę, że potrzebujesz tylko jednego zestawu curlies i nadal bez cudzysłowów. Cytaty są przyczyną błędu w OP. – coblr

React-Style, WebPACK, React - Uncaught Error: Inwariant wykroczenie: Opcja `style` prop

Odpowiedz

Powiązane problemy