1

如果我运行 webpack-dev-server 然后转到 localhost:8080，我的应用会加载样式。但是，CSS 样式显示在单个 div 的“样式”属性上，而不是在标题中，我认为这是“反应样式”的重点。

我生成的 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'));
}

悬停动作.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;
4

1 回答 1

0

You should bind the style through styles prop, not style.

于 2015-05-02T05:12:31.180 回答