首页 文章

反应中导入组件的麻烦

提问于
浏览
2

嗨我'm having trouble importing components from one jsx into another. I' m使用 django framework 来提供我的网页文件,我已经下载了所有必要的工具(npm,webpack,webpack-bundle-tracker,babel loader,django-webpack loader) . Webpack 很好地将所有单独的javascript文件转换为捆绑,然后我的本地django服务器可以呈现 . 问题在于我试图 import a component from one jsx into another jsx . 没有't any errors that I see but the javascript that I' m尝试导入不加载django .

示例: File:index.js

var React = require('react')
var ReactDOM = require('react-dom')
var Body = require('./app.js')

ReactDOM.render(<Body message="Welcome to my website"/>, document.getElementById('app1'))

导入文件(与index.js位于同一目录中): File:app.js

var React = require('react')
var Body = React.createClass({
    getInitialState: function() {
        return {
            bodymessage: this.props.message
        }
    },
    render: function() {
        return (
            <h1>
            {this.state.bodymessage}
            </h1>
        )
    }
})
module.exports = Body;

我的配置有问题吗?

这是我的webpack.config.js文件:

var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    context: __dirname,
    entry: './assets/js/index', 

    output: {
        path: path.resolve('./assets/bundles/'), 
        filename: '[name]-[hash].js', 
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}), 
        new webpack.ProvidePlugin({ 
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' 
        })
    ],

    module: {
        loaders: [
            {test: /\.jsx?$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader', 
                query: {
                    presets: ['react'] 
                }
            }
        ]
    },
    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.js', '.jsx'] 
    }   
}

1 回答

  • 0

    尝试更换它

    loader: 'babel-loader',
    

    loader: 'babel',
    

    在你webpack配置

    PS:这应该是一个评论,但不足以代表

相关问题