Question

在尝试通过将导入的项目转换为节点模块从我的另一个项目中导入组件时，该组件显示为未定义。此组件使用具有自己定义的React-Router-Dom：

<Link to=""> <Link />

然后将该组件通过自己的路由器导入到父项目中，但是在编译时，该组件未定义。

可能是什么原因引起的？

尝试：

从组件中删除了所有的react-router-dom导入，并将其作为纯html文件导出，从而成功导出了组件。
从导出的组件中删除路由器，仅保留链接包装器。
消除了对历史道具的需求

导出的组件：

     export default function ExampleWrapper({ history }) {
       return (
        <div>
           <Router>
            <div>
                <Link to="/example">
                    <button>Example</button>
                </Link>

                <Link to="/secondExample">
                    <button>secondExample</button>
                </Link>
            </div>

            <Fragment >
                <Switch >
                    <Route path="/example" exact component={Example} />
                    <Route path="/secondExample" exact component={SecondExample} />
                </Switch>
            </Fragment>
          </Router>
        </div>

在模块索引中公开导入的索引：

export default Example;

export { SecondExample, ThirdExample, ExampleWrapper};

使用节点模块的组件将导出：

import { ExampleWrapper } from 'create-react-library';

function App() {
    return (
        <div className="App">

            <ExampleWrapper history={history} />

            <Router history={history}>
                <Navbar />
                <header className="App-header">
                    <div className="columns is-marginless">
                       <Fragment>
                           <Switch>
                              <Route path="/admin/home" exact component={Home} />
                           </Switch>
                        </Fragment>
                     </div>
                 </header>
             </Router>
         </div>
   );
}

错误代码：

Cannot read property 'dispose' of undefined
./node_modules/react-dev-utils/webpackHotDevClient.js
C:/Users/userName/DEV/concepts/admin-ui/node_modules/react-dev-utils/webpackHotDevClient.js:45

Answer 1

您需要在父项目中编辑webpack.config.js，并添加子项目所需的依赖项。

在您的情况下：

  externals: (isEnvDemo || isEnvProduction)
  ? {
    react: 'react',
    'react-dom': 'react-dom',
    'react-router-dom': 'react-router-dom'
  }

Answer 2

也许是因为您使用的是默认导出，而在导入时则使用的是命名导入。

当您导出默认值并要导入时，请使用以下语法

import TypeAnythingYouWantHere from 'xx/xx'

您可以键入任何您想参考的内容，因为它是默认导出，并且始终相同。

对于命名出口，请使用花括号

import { MustBeSameNameAsInExport, ... , ... } from 'xx/xx'

导入使用React-Router-Dom

2 个答案: