反应组件

Question

我是Jest和JavaScript的新手。我有一个包含一些组件的书面js代码，我需要为这个网站添加一个Log Out选项。

我有一个Log Out组件，但我不知道如何将它添加到js代码中。

这是Log Out组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export class LogoutButton extends Component {
  static contextTypes = {
    store: PropTypes.object.isRequired,
  };

  handleClick = () => {
    this.context.store.dispatch(logout());
  };

  render() {
    return <button type="button" onClick={this.handleClick}>Logout</button>;
  }
} 

这是我的WholeScreen组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Nav, NavItem} from 'react-bootstrap';
import {YearlySummary} from './YearlySummaryComponent.js'


export class WholeScreen  extends Component{
  constructor() {
    super();
    this.state = {
      year: (new Date()).getFullYear()
    };

    this.handleSelect = this.handleSelect.bind(this);
  } 
  handleSelect(eventKey){    
    this.setState({year : eventKey})

  }


  render(){
    <LogoutButton />
    var buttons = [];
    var yearData = [];
    if (this.state.year === (new Date()).getFullYear() ){
      buttons.push(<NavItem key={this.state.year - 1} eventKey={this.state.year - 1} >&larr;{this.state.year - 1}</NavItem>);

    }
    else{
      buttons.push(<NavItem key={this.state.year - 1} eventKey={this.state.year - 1} >&larr;{this.state.year - 1}</NavItem>);
      buttons.push(<NavItem key={this.state.year + 1} eventKey={this.state.year + 1} >{this.state.year + 1}&rarr;</NavItem>);
    }

    var thisYear = this.state.year;
    this.props.data.forEach(function(dataEntry) {
      var dt = new Date(dataEntry.donationDate);
   //    var dtUTC = new Date(dt.getUTCFullYear(),dt.getUTCMonth(),dt.getUTCDate(),dt.getUTCHours(),dt.getUTCMinutes(),dt.getUTCSeconds());
       if (dt.getUTCFullYear() === thisYear){ 

         //dataEntry.donationDate = dtUTC.getMonth().toString()+"/"+dtUTC.getDate().toString()+"/"+dtUTC.getFullYear().toString();
        yearData.push(dataEntry);
       }      
     });


    return(
      <div className="WholeScreen">
        <div>
       <Nav bsStyle="pills" activeKey={this.state.year} onSelect={this.handleSelect} >
          {buttons}
        </Nav>
        </div>
        <div>          
          <YearlySummary year={this.state.year} yearData={yearData}/>
        </div>
      </div> 
    );
  }

}   

当我添加它然后运行

npm run buid

我收到一个错误：

Failed to compile.

./src/components/LogoutButtonComponent.js
  Line 10:  'logout' is not defined  no-undef

Search for the keywords to learn more about each error.

我的问题是如何将LogOut组件添加到WholeScreen组件，以便它可以编译？

提前致谢！

Answer 1

您可以默认导出LogoutButton组件，因此您不需要使用花括号。如果您不从文件中导出其他内容，请使用export default class ClassName。那更好。

import LogoutButton from './LogoutButtonComponent.js'

现在你可以把它放在你想要显示的地方，

<LogoutButton />

Answer 2

由于您的LogoutButton不是默认导出，您可以像下面一样导入它

 import { LogoutButton } from './LogoutButtonComponent.js';

如果是默认导出，那么组件可以像下面那样导入，

 import LogoutButton from './LogoutButtonComponent.js';

在您的情况下导入它如下所示

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Nav, NavItem} from 'react-bootstrap';
import {YearlySummary} from './YearlySummaryComponent.js'
import { LogoutButton } from './LogoutButtonComponent.js';

export class WholeScreen  extends Component{
  constructor() {
    super();
    this.state = {
      year: (new Date()).getFullYear()
    };

    this.handleSelect = this.handleSelect.bind(this);
  } 
  handleSelect(eventKey){    
    this.setState({year : eventKey})

  }


  render(){

    var buttons = [];
    var yearData = [];
    if (this.state.year === (new Date()).getFullYear() ){
      buttons.push(<NavItem key={this.state.year - 1} eventKey={this.state.year - 1} >&larr;{this.state.year - 1}</NavItem>);

    }
    else{
      buttons.push(<NavItem key={this.state.year - 1} eventKey={this.state.year - 1} >&larr;{this.state.year - 1}</NavItem>);
      buttons.push(<NavItem key={this.state.year + 1} eventKey={this.state.year + 1} >{this.state.year + 1}&rarr;</NavItem>);
    }

    var thisYear = this.state.year;
    this.props.data.forEach(function(dataEntry) {
      var dt = new Date(dataEntry.donationDate);
   //    var dtUTC = new Date(dt.getUTCFullYear(),dt.getUTCMonth(),dt.getUTCDate(),dt.getUTCHours(),dt.getUTCMinutes(),dt.getUTCSeconds());
       if (dt.getUTCFullYear() === thisYear){ 

         //dataEntry.donationDate = dtUTC.getMonth().toString()+"/"+dtUTC.getDate().toString()+"/"+dtUTC.getFullYear().toString();
        yearData.push(dataEntry);
       }      
     });


    return(
      <div className="WholeScreen">
        <div>
       <Nav bsStyle="pills" activeKey={this.state.year} onSelect={this.handleSelect} >
          {buttons}
          <LogoutButton />
        </Nav>
        </div>
        <div>          
          <YearlySummary year={this.state.year} yearData={yearData}/>
        </div>
      </div> 
    );
  }

} 

注销未定义，因为没有定义注销功能在下面的代码中检查我的注释

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export class LogoutButton extends Component {
  static contextTypes = {
    store: PropTypes.object.isRequired,
  };

  handleClick = () => {
    //this.context.store.dispatch(logout()); //here you are calling logout() but this never defined in this component. You need to define logout function as you are calling
  };

  render() {
    return <button type="button" onClick={this.handleClick}>Logout</button>;
  }
}