Question

当我向按钮数组添加新按钮时，会发生奇怪的事情。它不会将新按钮定位在其他按钮附近，而是在屏幕中间。

这是代码中添加“ Back ti

”按钮的行

buttons.push(<LogoutButtonComponent onLogout = {this.onLogoutClick}/>)

这就是我将按钮添加到按钮[]的方式：

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>);
      buttons.push(<LogoutButtonComponent onLogout = {this.onLogoutClick}/>)
    }
    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>);
      buttons.push(<LogoutButtonComponent onLogout = {this.onLogoutClick}/>)
    }


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

这是网站上显示的内容：

我还尝试将其放在if {}和else {}语句中，但这也不起作用。

这是LogoutButtonComponent：

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

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

  handleClick = () => {
    this.props.onLogout();
  };

  render() {
    const LogoutButtonStyle = {
     color: 'black',
     background: '#b7e1f7',
     height: 45,
     width: 100,
    }

    return (
    <button type="button" onClick={this.handleClick} style = {LogoutButtonStyle}>Back to Microsoft Give</button>
  );
 }
}

相关CSS：

.nav-pills > li > a {
border-radius: 0px;
background-color: white;
border:#7fabd2;
border-style: solid;
border-width: thin;
margin-left: 15px;
font-size: 17px;
}

.nav-tabs > li.active {
  background-color: white;  
  border-radius: 0px;

}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  background-color: white;
  border-radius: 0px;  
  margin: 0px;
}

Answer 1

信息不完整，但是根据我所看到的并假设它是reactstrap或react-bootstrap，您可能需要使用以下结构：

<Nav>
    <NavItem/>
    <NavItem/>
    <NavItem/>
    <NavItem/>
</Nav>

导航仅包含导航项的地方

我建议您将LogoutButtonComponent包裹在NavItem组件中

<Nav>
    <NavItem/>
    <NavItem/>
    <NavItem/>
    <NavItem/>
    <NavItem><LogoutButtonComponent/></NavItem>
</Nav>

让我知道怎么回事！

React js中的按钮数组

1 个答案: