javascript - 使用ES6语法写的react组件无法渲染？

问题描述

问 题

https://github.com/wxungang/ES6_REACT_1104.git（项目链接）

app.jsx 文件
/**

• Created by xiaogang on 2016/5/26.
  */
  "use strict";

1. ReactDOM from 'react-dom';

2. test from "../components/test";
   console.log(test);

   ReactDOM.render(

    <div>
      <test className="myLists" title="header">
      </test>
    </div>,
    document.getElementById('body')

   );

   test.js文件（简单的组件都没法渲染）
   /**

   • Created by xiaogang on 2016/6/8.
     */
     "use strict";

3. {Component, PropTypes} from 'react';

4. default class Test extends Component{

      constructor(props){
          super(props);
          this.state={};
      }
   
      render(){
          return <div>test {this.props.name }</div>
      }

   }

   webpack.config.js

5. path = require('path');

6. webpack = require('webpack');

   module.exports = {

    devtool: 'cheap-module-eval-source-map',
    entry: [
      'webpack-hot-middleware/client', 
      './docs/src/js/app.jsx',
      './docs/src/less/style.less'
    ],
    output: {
      path: path.join(__dirname, 'docs'),
      filename: 'js/app.js',
      publicPath: '/'
    },
    externals: {'react': 'React', 'react-dom': 'ReactDOM'},
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ],
    module: {
      loaders: [
        { test: /\.jsx?$/, loaders: ['babel'], include: [
          path.resolve(__dirname, 'src'), 
          path.resolve(__dirname, 'docs'), 
          path.resolve(__dirname, 'node_modules/refetch')
        ] },
        { test: /\.(css|less)$/, loader: 'style-loader!css-loader?localIdentName=[hash:base64:8]!less-loader' },
        { test: /\.(ttf|eot|woff|woff2|otf|svg)/, loader: 'file-loader?name=./font/[name].[ext]' },
        { test: /\.json$/, loader: 'file-loader?name=./json/[name].json' },
        { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=10000&name=./images/[name].[ext]' }
      ]
    }

   };

解决方案

粗看了一下，发现俩问题：

第一，webpack.config.js的jsx那个loader里却少babel-preset-react和babel-preset-es2015，这两个presets不设置，压根不会能跑起来，像这样：

第二，还是webpack.config.js，你又不做独立类库，这句话写来干嘛？externals: {'react': 'React', 'react-dom': 'ReactDOM'},

这篇关于javascript - 使用ES6语法写的react组件无法渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！