Question

经过对SO的大量阅读后，我得出的结论是，在React组件中使用JQuery大部分是不好的做法。那么我将如何实现以下目标，尽可能对React友好...

假设我的组件中有一个列表：

let myList = [
    {title: 'list item 1'},
    {title: 'list item 2'},
    {title: 'list item 3'},
    {title: 'list item 4'},
    {title: 'list item 5'},
    {title: 'list item 6'}
]

除非点击Show All，否则我只想显示前3项。

我的render()看起来像：

render () {

    return (
      <div>
      myList.map(function(item, i) {
          <a>{item.title}</a>
      }
      <a>Show All</a>
      </div>
   )
}

我知道如何在JQuery中执行此操作，但我想知道我的解决方案将使用React最佳实践。

Answer 1

我会编写一个函数来封装要显示的内容的逻辑。然后，您需要使用状态来捕获是否单击了全部显示，以便您可以区分何时显示前3个以及何时显示全部。关键是返回要渲染的jsx数组：

renderItems() {
  const itemList = [];
  // can be more succinct here - just for demo purposes
  for (let i = 0; i < myList.length; i++) {
    if (this.state.showAll !== true && i === 3) {
      break;
    }
    itemList.push(<a>{ myList[i].title }</a>);
  }
  return itemList;
}

render() {
  return (
    <div>
      { this.renderItems() }
    </div>
  );
}

然后，您需要添加处理程序，以便在有人点击＆＃34;全部显示＆＃34;设置状态：

<a onClick={ this.showAll }>Show All</a>

如果您引用这样的实例方法，请确保将其在构造函数中绑定回＆＃34;此＆＃34;：

constructor() {
  this.showAll = this.showAll.bind(this);
  this.state = {
    showAll = false;
  };
}
showAll(e) {
  e.preventDefault();
  this.setState({ showAll: true });
}

在没有JQuery的React组件中显示N个列表项

1 个答案: