这是一种解决方案。JSB在这里

首先，将所有组件数据放入其state.

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" },
  ],
  itemsToShow: 3,
  expanded: false
}

this.showMore = this.showMore.bind(this);

让我们itemsToShow知道在未展开时要显示多少项。我们可以使用expanded变量来根据用户的操作更改按钮文本。我们还绑定showMore到此组件，以便按钮知道单击时要调用的组件方法。

在我们的渲染中，让我们改变一些东西，像这样

<ul>
  {this.state.cars.slice(0, this.state.itemsToShow).map((car, i) => 
    <li key={i}>{car.name} - {car.country}</li>
  )}
</ul>

我们将从 0 渲染到itemsToShow我们拥有的数量。然后我们可以expanded像这样根据值更改按钮的文本

<a className="btn btn-primary" onClick={this.showMore}>
  {this.state.expanded ? (
    <span>Show less</span>
  ) : (
    <span>Show more</span>
  )}
</a>.

最后，我们来编写showMore实际改变 的值的方法itemsToShow。

showMore() {
  this.state.itemsToShow === 3 ? (
    this.setState({ itemsToShow: this.state.cars.length, expanded: true })
  ) : (
    this.setState({ itemsToShow: 3, expanded: false })
  )
}

你做错了一些事情。您需要了解什么是状态以及 react 如何与它交互。当状态发生变化时，您的渲染函数会再次被调用，它允许您根据当前状态进行动态渲染。

首先，用你想要的东西初始化你的状态（在这里，我可以只放置rowsToDisplay，但我猜你也希望能够更新你的汽车）。

您应该将 this 绑定到您的函数 showMore 以便在调用它时，它会得到“this”指的是您的组件。

OnClick, showMore 将被调用；该功能更新您的状态。通过更新它，将再次调用渲染（请记住，状态更改会使用新值再次调用渲染）。这应该是您更新视图的唯一方法。

class Application extends React.Component {
  constructor(props) {
    super(props)

    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" },
    ],    
    rowsToDisplay : 4};
    this.showMore = this.showMore.bind(this);
  }

  showMore() {
    let carLength = this.state.cars.length;
    this.setState({rowsToDisplay:carLength});
    // show more entries
    // switch to "show less"
  }
  render() {
    return <div className="container">
      <h3>Click show more to see more data</h3>
      <div className="row">
        <h3>List of Cars</h3>
        <ul>
          {this.state.cars.slice(0,this.state.rowsToDisplay).map((car, i) => <li key={i}>{car.name} - {car.country}</li>)}
        </ul>
      </div>
      <p>
        <a className="btn btn-primary" onClick={this.showMore}>Show more</a>.
      </p>
    </div>;
  }
}

React.render(<Application />, document.getElementById('app'));

随意提问，但请先阅读文档：https : //facebook.github.io/react/docs/state-and-lifecycle.html