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...之类的消息。然后这条消息就会消失。

提前感谢您的帮助！

Answer 1

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

https://codesandbox.io/s/k2mpvkr2n7

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

对于视觉内容我放了一个setTimeout并忽略cow数组（：

Answer 2

这是一个想法：

您将回调道具传递给ItemComponent
从ItemComponent的componentDidMount（）调用此回调用于初始渲染，而componentDidUpdate（）用于后续渲染。
回调会增加MyWrapper中的状态变量
此状态变量等于长度

请注意，应使用函数作为参数更新计算渲染的状态变量，以确保它正确递增（请参阅Microsoft's blessed version）

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

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

3 个答案: