ReactJS渲染包含的文件不能正常工作

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 /> transpiles React.createElement('formA')和<FormA /> transpiles into React.createElement(FormA)。

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

More in React docs