Question

我使用React和Flux架构。

在我的应用程序的某个部分，我需要显示一些元素（比如说，6），如果有更多，还会显示一个按钮，在点击时会显示其余部分。当我使用Flux时，我希望我的组件尽可能无状态。到目前为止，我已经尝试过：

let elements = [...] //Array with elements, passed as a prop to MyApp
class MyApp extends React.Component {
...
  render(){
    var elements = this.props.elements.map((elem, i) => {
      if (i == 5)
        return <More />
      if (i > 5)
        return;
      return (
       <ShowElement key={i} />
      )

  return <div>{elements}</div>
  }
}

我想我可以通过将剩余的元素作为prop传递给我的More组件来完成这项工作，但感觉不对。有更好的方法吗？

Answer 1

只要显示6个项目并在单击按钮时休息，这是使用状态执行此操作的方法：

let elements = [...] //Array with elements, passed as a prop to MyApp

class MyApp extends React.Component {

  getInitialState() {
    return {
      all: false
    };
  },

  render(){
    return <div>{this._renderElements(this.props.elements, this.state.all)}</div>
  },

  _renderElements(elements, showAll) {

      const _elementsToRender = [];
      const _elements = elements.splice(0); // clone array
      let remainder = [];

      if (!showAll) {
        remainder = _elements.splice(6);
      }

      _elements.forEach(el => {
          _elementsToRender.push(
              <ShowElement {..el} />
          );
      });

      if (remainder.length > 0) {
          _elementsToRender.push(
                <button onClick={evt => this.setState({ all: true })}>show all</button>
          );
      }

      return (
          <div>
            {_elementsToRender}
          </div>
      );
  }
}

如果你想保持你的组件无状态，你可以传递类似showAll prop和make <button>（或你使用的任何自定义元素）触发动作，它会改变商店中的showAll值并发出新值，因此组件更新那样。

Answer 2

使用style = {moreSty}在span或div中包裹更多元素。 moreSty的默认值为display：'none'。更多按钮的click方法将设置moreSty显示：'inline'或'block'。

ReactJS - 显示一些元素和一个按钮以显示更多

2 个答案: