ReactJS

Question

我正在使用具有 Flux 架构的 React。

在我的应用程序的某个部分，我需要显示一些元素（比方说，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>
  }
}

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

Answer 1

用 style={moreSty} 将更多元素包裹在一个 span 或 div 中。 moreSty 的默认显示是：'none'。更多按钮的点击方法将设置 moreSty 以显示：'inline' 或 'block'.

Answer 2

就显示 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 的东西，并使 <button>（或你使用的任何自定义元素）触发操作，这将改变存储中的 showAll 值并发出新值，所以组件以这种方式更新。

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

ReactJS - Showing some elements and a button to show more

flux

reactjs-flux