Question

让我先说一下我对ReactJS很新并且还在学习，所以我不能完全掌握它的所有组成部分。

我试图建立一个简单的＃34; hello world＆＃34;应用程序通过代码了解信息流。我正在使用webpack将所有.js文件包装到main.js文件中，并使用exposeloader来访问我公开的类/对象。

我的问题是，当我访问根作用域上的对象Renderings时，它应该由不同的公开类/函数组成，并且在某种程度上它应该包含，但是它们嵌套在{{1属性，所以我必须使用default来访问它们，为什么会这样？怎么没有直接在Renderings.default上公开它们？

该应用程序包含以下文件：

Hello.js：

Renderings

World.js：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

export default class Hello extends React {

  render(){
    return <p>Hello</p>
  }
}

App.js：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

export default class World extends React {

  render(){
    return <p>World!</p>
  }
}

allRenderings.js

import Hello from './hello.js'
import World from './world.js'
import React, {Component} from 'react';
import ReactDOM from 'react-dom';


export default class App extends React {

  render(){    
    return (
      <div><Hello /><World /></div>
    )
  }
}

index.js：

import App from '../src/app'
import Hello from '../src/hello'
import World from '../src/world'


let renderings = {}

function setupRendering(key, render){
  renderings[key] = render
}

setupRendering('App', App)
setupRendering('Hello', Hello)
setupRendering('World', World)

module.exports = renderings

webpack.config.js：

require('expose-loader?React!react')
require('expose-loader?ReactDOM!react-dom')
require('expose-loader?Renderings!../rendering/allRenderings')

index.cshtml：

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

process.noDeprecation = true; 

module.exports = function() {
  var extractCss = new ExtractTextPlugin('[name].css')


  var config = {
    entry: path.resolve(__dirname, '../src/index.js'),
    output: {
      path: path.resolve(__dirname, '../dist/'),
      publicPath: '/',
      filename: '[name].js'
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    module: {
      rules: [{
        loader: "babel-loader",
        include: [
          path.resolve("../src"),
          ],
        test: /\.jsx?$/,
        options: {
          plugins: ['transform-runtime', 'transform-class-properties'],
          presets: ['es2015', 'react', 'stage-2'],
          },

      }]
    }
  };

  return config
}

Answer 1

似乎我在错误的地方寻找答案。这些评论让我意识到这与ES6有关，而不是React。

似乎有不同的答案取决于你询问的人/地点，是否与将ES6转换为ES5，webpack或babel有关，但更多信息可以在这里找到：

https://github.com/webpack/webpack/issues/706

导出的类/函数包含在＆＃34;默认＆＃34;属性

1 个答案: