Реагировать компонент

Question

Я новичок в Jest и JavaScript в целом.У меня есть письменный код js, включающий некоторые компоненты, и мне нужно добавить опцию «Выход из системы» для этого веб-сайта.

У меня есть компонент «Выход из системы», но я не уверен, как добавить его в код 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 не является экспортом по умолчанию, ее можно импортировать, как показано ниже

 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>;
  }
} 

Answer 2

Вы можете экспортировать компонент LogoutButton по умолчанию, поэтому вам не нужно использовать фигурные скобки. Если вы не экспортируете другую вещь из файла, используйте export default class ClassName. Это лучше.

import LogoutButton from './LogoutButtonComponent.js'

и теперь вы можете поместить это туда, куда хотите показать,

<LogoutButton />