Question

如果我运行webpack-dev-server然后转到localhost：8080，我的应用程序会加载样式。然而，CSS样式出现在＆＃34;样式＆＃34;各个div的属性而不是标题内的属性，我认为这是＆＃39; react-style＆＃39;。

我的HTML：

<html><head>
  <style type="text/css"></style></head>
  <body style="zoom: 1;">
    <div id="app"><div data-reactid=".0"><div style="height:200px;width:200px;border:1px solid black;" data-reactid=".0.0"><div data-reactid=".0.0.0"></div><div style="text-align:center;font-size:10px;" data-reactid=".0.0.1">new</div></div></div></div>
    <script src="bundle.js"></script>

</body></html>

此外，如果我转到http://localhost:8080/webpack-dev-server/bundle，我会收到以下错误：

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

这是我的index.html：

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

webpack.config.js：

'use strict';

module.exports = {
  entry: './modules/main.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'jsx-loader?harmony'
      },
      { 
        test: /\.less$/, 
        loader: 'style-loader!css-loader!less-loader' 
      },
      { 
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      { 
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=8192'
      } // inline base64 URLs for <=8k images, direct URLs for the rest
    ]
  }
};

mains.js：

/** @jsx React.DOM */

var React = require('react');
var HoverAction = require('./HoverAction/HoverAction');

var Application = React.createClass({
  render: function() {
    return (
      <div>
        <HoverAction title="new"/>
      </div>
    );
  }
});


if (typeof window !== 'undefined') {
  React.render(<Application />, document.getElementById('app'));
}

HoverAction.js：

/** @jsx React.DOM */
'use strict';

var StyleSheet = require('react-style');
var React = require('react');

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

var HoverActionStyles = StyleSheet.create({
    normal: {
        height: '200px',
        width: '200px',
        border: '1px solid black'        
    }
});

var HoverActionTitleStyle = StyleSheet.create({
    normal: {
        textAlign: 'center',
        fontSize: '10px'        
    }
});

module.exports = HoverAction;

Answer 1

您应该通过样式道具绑定样式，而不是样式。

React-Style不能与webpack-dev-server一起使用。样式未提取。获得不变违规：_registerComponent（...）：目标

1 个答案: