时间戳

首页 > 解决方案 > 导入并要求反应问题-无法读取未定义的属性“渲染”

javascript - 导入并要求反应问题-无法读取未定义的属性“渲染”

问题描述

我一直在努力启动我的反应项目。我正在使用带有 babel、webpack 和 webpack 开发服务器的 react 来快速原型化。

首先，我无法让导入功能正常工作。我尝试通过将 import ES6 语法转换为 Node 的 require 语法来解决此问题，这似乎解决了“导入”无法识别（“找不到令牌导入”）的问题。我真的不知道从哪里开始解决这个问题，如果可能的话，我希望以正确的方式指出。

这是我的 webpack 配置：

var HTMLWebpackPlugin = require('html-webpack-plugin');

var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: __dirname + '/main.js',
    module: {
        rules: [
    {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
    }
        ]
    },
    output: {
        filename: 'transformed.js',
        path: __dirname + '/build'
    },
    plugins: [HTMLWebpackPluginConfig]
};

我的原始代码如下所示：

const React = require('react').default;
const ReactDOM = require('react-dom');

//Components
const MainTable = require('./app/components/input_table/maintable').default;
const ButtonMenu = require('./app/components/button_menu/buttonmenu').default;

//App Logic
const onUndoAction = require('./app/undo').default;
const onRedoAction = require('./app/redo').default;
const onInputChange = require('./app/input').default;


class App extends React.Component {

    constructor(props){
      //properties
      super(props);
      this.props.inputId = 0


      //state
      this.state = {

        gridState: [
          {
          rows: 2,
          columns: 1,
          type:"cell"
          }
        ],

        cellValues: [{
          cellId: 0,
          cellValue: "first",
          type:"value"
        }],
        undo: [{rows: 2, columns: 1, type: "cell"},
        {cellId: 0, cellValue: "first", type:"value"}],
        redo: ["empty"],
      }
... additional code omitted

标签： javascriptreactjsecmascript-6

解决方案

您需要配置您的 babel 设置以转译 es6 代码。

按照以下步骤操作 webpack：https ://babeljs.io/setup#installation

推荐阅读