渲染所有子项时隐藏加载图标

Question

关于反应中的渲染我有一些微不足道的（我猜）问题，但无法解决它，也无法找到任何解决方案。

我的问题是我有一些组件，它是一些条目的包装器。 就像是：

class MyWrapper extends Component {
  renderItems() {
    return (
        {this.props.items.map(item => (
         <ItemComponent item={item} />
        ))}
    );
  }

  renderMessage() {
    return (<p>No items to show</p>);
  }

  render() {
   <div>
     {this.props.length
        ? this.renderItems()
        : this.renderMessage()
     } 
   </div>
  }
}

通常我进入this.props.items一堆项目，所以渲染所有主题花了一些时间。 这就是为什么我要显示Loading items...等消息Loading items...直到渲染所有项目完成。 然后这条消息就会消失。

提前感谢您的帮助！

Answer 1

这些只是我的实验怎么做 - 我建议采取一些想法并自己尝试，也许它会让你走上正轨或者这可能是胡扯

https://codesandbox.io/s/k2mpvkr2n7

主要思想是将列表放在单独的组件中，并在安装时更改加载状态。

对于可视化的东西我放了一个setTimeout并忽略了cow数组（：

Answer 2

这是一个想法：

1. 您将回调道具传递给ItemComponent
2. 对于初始渲染，从ItemComponent的componentDidMount（）调用此回调，对于后续渲染，调用componentDidUpdate（）。
3. 回调在MyWrapper中递增状态变量
4. 当此状态变量等于length时，将显示Loading ....

请注意，计数状态变量呈现应该使用函数作为参数，以确保它是正确递增更新（见本 ）

Answer 3

这是一个快速而肮脏的解决方案。 理想情况下，这个概念将是您正在寻找的，您可以根据需要进行清理。

（另外，我的理解是问题是props.items很大，并且地图程序只需要一段时间）

class MyWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = { items: [] }
  }

  componentDidMount() {
    this.setState({ items: this.createItemComponents() })
  }

  createItemComponents() {
    return this.props.items.length !== 0
      ? this.props.items.map(item => <ItemComponent item={item} />);
      : <p>No items to show</p>;
  }

  render() {
   <SomeLoadingIndicator active={this.state.items.length === 0} />

   <div>{this.state.items}</div>
  }
}