Question

我刚开始使用react.js和create-react-app应用程序，请原谅我这是一个显而易见的问题。

我的'src'文件夹结构如下：

NameError                                 Traceback (most recent call last)
<ipython-input-34-142109a9084d> in <module>()
      6                     'standard deviation' : np.std(col_data)}
      7 
----> 8 for key, value in values.items():
      9     print(key, ':' , value)

NameError: name 'values' is not defined

在App.js中我有这个：

scr/
....components/
........ComponentA.jsx
........Componentb.jsx
....styles/
........ComponentA.css
....App.css
....App.js
....App.test.js
....index.css
....index.js
...OTHER DEFAULT FILES

在import React, { Component } from 'react'; import ComponentA from './components/ComponentA'; class App extends Component { render() { return ( <div className="App"> <ComponentA /> </div> ); } } export default App;我有这个：

ComponentA

在import React, { Component } from 'react'; import './styles/ComponentA.css'; import ComponentB from './components/ComponentB'; class ComponentA extends Component { render() { return ( <div className="componentAStyle"> <ComponentB /> </div> ); } } export default ComponentA;我有这个：

ComponentB

我要做的只是从import React, { Component } from 'react'; class ComponentB extends Component { render() { return ( <div> <h1>Hello from ComponentB</h1> </div> ); } } export default ComponentB;导入ComponentB并导入ComponentA的样式，但是这一切都显示以下消息：

ComponentA

如果我删除了css导入，则会出现另一条错误消息：

Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './styles/ComponentA.css' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.

如何从其他组件及其各自的css导入另一个组件？

感谢。

Answer 1

您需要使导入的路径相对于执行导入的文件的当前位置。

正确的导入是

组件A

import React, { Component } from 'react';
import '../styles/ComponentA.css';
import ComponentB from './ComponentB';

您可以在https://glitch.com/edit/#!/trashy-unicorn看到此工作（单击左上角的“显示实时”。）

目前您的错误发生了什么

import ComponentB from './components/ComponentB';

正在寻找路径

src/components/components/ComponentB

不存在，因此会出错。你的风格也一样。

希望这有帮助。

导入css文件并在create-react-app应用程序中对组件做出反应？

1 个答案:

组件A