Question

使用此设置：https://github.com/gaearon/react-transform-boilerplate

问题是索引不会从文件form.jsx呈现任何内容。它只显示“索引文件”。我在webpack配置中将加载程序更改为“test: /\.jsx?$/,”。有什么问题的线索？

index.jsx

import React, { Component } from 'react';
import formA from './form.jsx';

class index extends Component {
  render() {
    return (
      <div>
        Index file
        <formA />
      </div>
    );
  }
}

export default index;

form.jsx

import React, { Component } from 'react';

class formA extends Component {
  render() {
    return (
      <div>
        test
      </div>
    );
  }
}

export default formA;

Webpack配置

var path = require('path');
var webpack = require('webpack');
module.exports = {
  // or devtool: 'eval' to debug issues with compiled output:
  devtool: 'cheap-module-eval-source-map',
  entry: [
    // necessary for hot reloading with IE:
    'eventsource-polyfill',
    // listen to code updates emitted by hot middleware:
    'webpack-hot-middleware/client',
    // your code:
    './src/scripts/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

Answer 1

您应该使用大写字母启动组件名称 - 将<formA />替换为<FormA />。

它发生了，因为<formA />转换为React.createElement('formA')而<FormA />转换为React.createElement(FormA)。

在第一种情况下，您创建一个名为formA的标记。在第二种情况下，您将创建组件 FormA。

ReactJS渲染包含的文件不起作用

1 个答案: