Question

我尝试设置一些reactjs组件的样式。我的浏览器开发控制台返回此错误：

App.jsx：11 Uncaught TypeError：无法读取属性＆＃39; TodoComponent＆＃39;的未定义在App.render（App.jsx：11）

我尝试使用以下语法导入：

App.jsx：

import {styles} from ...
import {styles as styles} from...

styles.js：

export default styles... 
export styles...

所有令人心烦的事。

这是我的树形结构：

src content directory - ls :
App.jsx  styles.js

这是我的App.jsx

import React from "react";
import { render } from "react-dom";
// Import the styles
import {styles} from "./styles.js";


class App extends React.Component {

  render() {
    return (
    <div style={styles.TodoComponent}>
(...)

这里是我的style.js：

    var TodoComponent = {
      width: "300px",
      margin: "30px auto",
      backgroundColor: "#44014C",
      minHeight: "200px",
      boxSizing: "border-box"
    };

    var styles = {


    TodoComponent: TodoComponent,
( other styles...) 
    };

这是我的webpack.config.js：

var webpack = require("webpack") ;
var path = require("path") ;
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports= {
mode: "development",
devtool : "source-map",
context : __dirname + "/src",
entry : { app : __dirname + "/src/App.jsx" },
output : { path: path.resolve(__dirname, "public/"),
          filename : "frontend.bundle.js"
},
module: {
   rules: [ {
     test: /\.js|jsx$/,
     exclude: /node_modules/,
   include: path.resolve(__dirname, "src"),
     use: [
       {
   loader: 'babel-loader',
   options: {
     presets: ["es2015", "stage-1", "react"]
   }
       }
     ]
   },
 {
 test: /\.css$/,
 use: [
   { loader: 'style-loader' },
   {
     loader: 'css-loader',
     options: {
       modules: true
     }
 }
 ]}
]},


optimization : {

 splitChunks: {
     chunks: "async",
     minSize: 3000,
     minChunks: 1,
     maxAsyncRequests: 5,
     maxInitialRequests: 3,
     automaticNameDelimiter: "~",
     name: true,
     cacheGroups: {
   vendors: {
       test: /[\\/]node_modules[\\/]/,
       priority: -10
   },
     default: {
       minChunks: 2,
       priority: -20,
       reuseExistingChunk: true
   }
     }
 }
},
devServer: {
  proxy: {
  "/api": "http://localhost:7000"
},
 contentBase: path.resolve(__dirname, "public/"),
 open : true
}
};

config.babelrc：

{
  "presets": ["env", "react", "stage-0"]
}

Answer 1

您需要将其导出：

var TodoComponent = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", minHeight: "200px", boxSizing: "border-box" };

export const styles = { TodoComponent: TodoComponent, };

App.jsx：11 Uncaught TypeError：无法读取属性＆＃39; TodoComponent＆＃39;未定义的

1 个答案: