ReactJS

Question

我目前正在使用 NodeJS 和 ReactJS 开发一个 Web 项目。我想在一个文件中包含两个组件，因为它们将使用相同的信息。其中一个组件使用 withRouter 来处理 "this.props.history.push"。由于我不知道处理我的 2 个条件的语法（withRouter + double export）我正在寻求你的帮助。我收到错误：

Failed to compile
./src/App.js
284:83-110 './components/Dnoc_cvat.js' does not contain an export named 'Dnoc_cvat_bouton_withRouter'.

在我的 App.js 中我写道：

import {Dnoc_cvat_bouton_withRouter} from './components/Dnoc_cvat.js'

Dnoc_cvat.js :

import React from 'react'
import {withRouter}from 'react-router-dom';

class Dnoc_cvat extends React.Component {
   render() {
   return( 
       <h3> DNOC - CVAT </h3>
         )
   }
}

class Dnoc_cvat_bouton extends React.Component {
   constructor(props) {
       super(props);
        this.handleClick=this.handleClick.bind(this);
   }

   handleClick(){
       this.props.history.push('/DNOC/CVAT');
   }

   render() {
   return( 
       <div className='component-button' onClick={this.handleClick} >
            <p>Hello world</p>
       </div>
         )
      }
   }

module.exports={
   Dnoc_cvat:Dnoc_cvat,
   Dnoc_cvat_bouton_withRouter:withRouter(Dnoc_cvat_bouton)
   }

Answer 1

module.exports 仅适用于 Node.js。

对于浏览器，您将需要以下 export 语法：

import React from 'react'
import { withRouter } from 'react-router-dom'

export class Dnoc_cvat extends React.Component {
  ...
}

class Dnoc_cvat_bouton extends React.Component {
  ...
}

export const Dnoc_cvat_bouton_withRouter = withRouter(Dnoc_cvat_bouton)

ReactJS - 处理文件中的多次导出 + withRouter

ReactJS - Handle multiples exports in a file + withRouter

javascript

module

ecmascript-6

react-router-dom