Question

我目前正在尝试创建一个显示某些状态但在点击按钮后显示更多状态的组件。每次单击一个按钮，它应该再显示3个项目。

我尝试了一些不同的东西，这是我目前的代码：感谢任何帮助和解释：

import React from 'react';
import { render } from 'react-dom';
class ShowSomeItems extends React.Component {
  constructor() {
    super()
      this.state = {
      cars: [
        { "name": "Audi", "country": "Germany" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Chevrolet", "country": "USA" },
        { "name": "Citroen", "country": "France" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Mercedes-Benz", "country": "Germany" },
        { "name": "Renault", "country": "France" },
        { "name": "Seat", "country": "Spain" },
        { "name": "Dodge", "country": "USA" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Tesla", "country": "USA" },
        { "name": "Volkswagen", "country": "Germany" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Jaguar", "country": "United Kingdom" },
        { "name": "GMC", "country": "USA" },
        { "name": "Bentley", "country": "United Kingdom" },
      ],
      numberOfitemsShown: 5,
    }
}


showMore = () => {
    let numberToincrementBy = 3;
    if(this.state.numberOfitemsShown < this.state.car.length){
     itemsToShow = this.cars.slice(0, incremenrIndex)
      numberToincrementBy+3
      return itemsToShow
    }
  }

render() {

    let itemsToShow = "Loading...";  
       if(this.state.numberOfitemsShown){
         itemsToShow =  for(let x = 0; x < 5; x++) {
        <li key={x}>{this.state.cars[x]['name']}</li>
       }
  }

return (
      <div>
        <ul>
         {itemsToShow}
        </ul>
        <button onClick={this.showMore}>
          show more
        </button>
      </div>
    );
  }
}


render(<ShowSomeItems />, document.getElementById('root'));

Answer 1

在这种情况下，更好的方法是利用组件状态来保持当前要显示的项目数，并使用按钮增加它。它更清晰，并且与定义UI的反应方式相得益彰。例如：

class ShowSomeItems extends React.Component {
  constructor() {
    super()
    this.state = {
      cars: [
        { "name": "Audi", "country": "Germany" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Chevrolet", "country": "USA" },
        { "name": "Citroen", "country": "France" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Mercedes-Benz", "country": "Germany" },
        { "name": "Renault", "country": "France" },
        { "name": "Seat", "country": "Spain" },
        { "name": "Dodge", "country": "USA" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Tesla", "country": "USA" },
        { "name": "Volkswagen", "country": "Germany" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Jaguar", "country": "United Kingdom" },
        { "name": "GMC", "country": "USA" },
        { "name": "Bentley", "country": "United Kingdom" },
      ],
      numberOfitemsShown: 5,
    }
  }


  showMore = () => {
    if (this.state.numberOfitemsShown + 3 <= this.state.cars.length) {
      this.setState(state => ({ numberOfitemsShown: state.numberOfitemsShown + 3 }));
    } else {
      this.setState({ numberOfitemsShown: this.state.cars.length })
    }
  }

  render() {

    const itemsToShow = this.state.cars
      .slice(0, this.state.numberOfitemsShown)
      .map(car => <li key={car.name}>{car.name}</li>);

    return (
      <div>
        <ul>
          {itemsToShow.length ? itemsToShow : "Loading..."}
        </ul>
        <button onClick={this.showMore}>
          show more
        </button>
      </div>
    );
  }
}

修改

您可以使渲染方法更清晰地将itemsToShow提取到这样的组件中：

const Items = props => { if (props.cars.length === 0) { return "Loading..." } return props.cars .slice(0, props.numberOfitemsShown) .map(car => <li key={car.name}>{car.name}</li>) } class ShowSomeItems extends React.Component { //rest excluded for brevity render() { return ( <div> <ul> <Items cars={this.state.cars} numberOfitemsShown={this.state.numberOfitemsShown} /> </ul> <button onClick={this.showMore}> show more </button> </div> ); } }

单击按钮时显示处于反应状态的更多项目

1 个答案: