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

我使用的是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>
  }
}

let elements=[…]//包含元素的数组，作为道具传递给MyApp
类MyApp扩展了React.Component{
...
render（）{
var elements=this.props.elements.map（（elem，i）=>{
如果（i==5）
返回
如果（i>5）
返回；
返回(
)
返回{elements}
}
}

---

我想我可以通过将剩余的元素作为道具传递给我的

More

组件来实现这一点，但感觉不对。有更好的方法吗？

用style={moreSty}将更多元素包装在span或div中。moreSty的默认值为display:'none'。“更多”按钮的单击方法会将moreSty设置为display:'inline'或'block'。

使用样式={moreSty}。moreSty的默认值为display:'none'。“更多”按钮的单击方法会将moreSty设置为display:'inline'或'block'。

只要在单击按钮时显示6个项目和rest，这就是使用状态执行的方法：

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

let elements=[…]//包含元素的数组，作为道具传递给MyApp
类MyApp扩展了React.Component{
getInitialState（）{
返回{
全部：错
};
},
render（）{
返回{this.\u renderRelations（this.props.elements，this.state.all）}
},
_渲染（元素、showAll）{
常数_elementsToRender=[]；
const _elements=elements.splice（0）；//克隆数组
让余数=[]；
如果（！showAll）{
余数=_元件。拼接（6）；
}
_elements.forEach（el=>{
_elementsToRender.push(
);
});
如果（余数.长度>0）{
_elementsToRender.push(
this.setState（{all:true}}>show all
);
}
返回(
{u elementsToRender}
);
}
}

---

如果你想让你的组件保持无状态，你可以通过showAll-prop和make

（或者你使用的任何自定义元素）触发操作，该操作将更改存储区中的showAll值并发出新值，以便组件以这种方式更新。

至于在单击按钮时显示6项和rest，这是使用状态执行的方法：

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

let elements=[…]//包含元素的数组，作为道具传递给MyApp
类MyApp扩展了React.Component{
getInitialState（）{
返回{
全部：错
};
},
render（）{
返回{this.\u renderRelations（this.props.elements，this.state.all）}
},
_渲染（元素、showAll）{
常数_elementsToRender=[]；
const _elements=elements.splice（0）；//克隆数组
让余数=[]；
如果（！showAll）{
余数=_元件。拼接（6）；
}
_elements.forEach（el=>{
_elementsToRender.push(
);
});
如果（余数.长度>0）{
_elementsToRender.push(
this.setState（{all:true}}>show all
);
}
返回(
{u elementsToRender}
);
}
}

如果您想让组件保持无状态，您可以传递showAll prop之类的消息，并使

（或您使用的任何自定义元素）触发操作，该操作将更改存储中的showAll值并发出新值，以便组件以这种方式更新