Question

我已经在src文件夹中创建了component文件夹，并尝试为我创建了3个文件编写简单的问候程序：

GreetUser.jsx
index.jsx
index.html

编译时显示找不到所需的index.js文件。

我已经在Component文件夹中写入了3个文件，并在index.jsx文件中导入了GreetingUser模块，并且在编译时显示找不到所需的index.js文件。

1.GreetingUser.jsx

import React , {component}  from 'react';
class GreetUser extends component
{
    render()
    {
        return <h1>Greetings from suraj!!!!</h1>;
    }
}
export default GreetUser;

2.index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import * as serviceWorker from './serviceWorker';

import GreetUser from './Component/GreetUser.jsx';


ReactDOM.render(<GreetUser/>,document.getElementById('aaa'));


serviceWorker.unregister();

找不到所需的文件。名称：index.js

Answer 1

从根本上讲，JSX只是为React.createElement（component，props，... children）函数提供语法糖。索引文件必须具有.js扩展名，而不是jsx不是React组件。文件夹中的index.js文件使您可以隐式地从文件夹中执行导入，而无需在import语句中指定index.js –就像Web服务器如何在文件夹中为index.html提供服务而无需显式放置索引网址中的.html。

如果需要，您可以修改webpack配置。您可以查看其他答案：Renaming index.js to index.jsx in react app和Why does create-react-app creates both App.js and index.js?

如何在react.js中的index.js中导入组件

1 个答案: