反应成分

Question

我对Jest和JavaScript还是陌生的。我有一个包含某些组件的书面js代码，我需要为此网站添加一个注销选项。

我有一个Log Out组件，但不确定如何将其添加到js代码中。

这是注销组件：

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