在 React 中导出/导入文件 .jsx

Posted 2023-02-23

【中文标题】在 React 中导出/导入文件 .jsx

【英文标题】：Export/import files .jsx in React

【发布时间】：2018-07-17 21:17:53

【问题描述】：

我最近尝试在 React 中创建单独的文件 .jsx。我用export default name / import name from ./name.jsx' 做了几个。但是问题来了。首先我从react-router 导入了路由和链接，控制台说找不到链接，我在*** 上找到将其更改为react-router-dom，所以我做到了，现在控制台说我忘了导出一些组件。我找不到解决方案:(有人可以帮我吗？

这是我的项目：

https://github.com/tafarian/Portfolio

import React from 'react';
import ReactDOM from 'react-dom';
import './../css/style.scss';
import 
    Router,
    Route,
    Link,
    IndexLink,
    IndexRoute,
    hashHistory
 from 'react-router-dom';
import Template from './Template.jsx'
import Projects from './Projects.jsx'
import Home from './Home.jsx'
import AboutMe from './AboutMe.jsx'
import Contact from './Contact.jsx'

【问题讨论】：

把代码放在这里，链接的工作量太大，我猜是你的路径不对

我在主题中添加了主文件 app.jsx 中的代码 :)

控制台说是模棱两可的。添加您为解决问题和确切问题所采取的步骤

好的，所以首先我只有 App.jsx 文件，在这个文件中我有我写的每一个组件。然后我开始为我拥有的每个组件制作单独的文件，然后我在每个文件中添加导出行并在主 app.jsx 文件中导入。在名为 Template.jsx 的文件中，我使用了页眉和页脚组件，因此我将它们导入到 Template.jsx 文件和 Template.jsx 到主 App.jsx

【参考方案1】：

这样的错误

“警告：React.createElement：类型无效 - 期望字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从文件中导出组件它的定义在。检查App的渲染方法。

意味着您正在尝试创建一个未定义的组件，并且正如它错误所说的那样 - 通常当您忘记导出组件或您正在导入的组件不存在时会发生这种情况。

当有很多组件并且很难找到哪个是“坏的”时，我会在 React 代码中的 console.error(message); 处放置一个断点，然后将堆栈跟踪上升到函数 createElement 和它的参数。通常它可以帮助我识别问题。

主要问题是您的代码与 react-router@4 不兼容。 在此版本中，您不能同时将children 和component 传递给Route。 另外，没有IndexRoute 这样的东西，你应该使用BrowserRouter 而不是Router，或者你应该传递一个history 对象。

查看文档：https://reacttraining.com/react-router/web/guides/philosophy

这里是 yout app.jsx 的固定版本：

import React from 'react';
import ReactDOM from 'react-dom';
import './../css/style.scss';
import 
    BrowserRouter,
    Route,
    Link,
    hashHistory
 from 'react-router-dom';
import Template from './Template.jsx'
import Projects from './Projects.jsx'
import Home from './Home.jsx'
import AboutMe from './AboutMe.jsx'
import Contact from './Contact.jsx'

document.addEventListener('DOMContentLoaded', function()

    class App extends React.Component 
        state = 
            loading: true,
        ;

        componentDidMount() 
            setTimeout(() =>
                this.setState(
                    loading: false
                ), 2500);
        

        render() 

            if(this.state.loading === true) 
                return (
                    <div id="preloader">
                        <div id="loader"></div>
                    </div>
                )
            

            return(
                <BrowserRouter history=hashHistory>
                    <Template>
                        <Route exact path="/" component=Home />
                        <Route path='/aboutme' component=AboutMe />
                        <Route path='/projects' component=Projects />
                        <Route path='/contact' component=Contact />
                    </Template>
                </BrowserRouter>
            )
        
    

    ReactDOM.render(
        <App />,
        document.getElementById('app')
    );
);