javascript - 做出反应。如何设置占位符，直到完全加载组件列表？

Question

所以我有Component渲染嵌套组件列表的方法Cri，我的目标是在屏幕上显示一些占位符，直到Cri组件列表完全加载到屏幕上。

有什么建议吗？

class Comp extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoaded: true
    }
  }
  _func = () => {
    const lis = [];
    const { att, cri, media, res, st } = this.props;
    cri &&
      cri.map((row, i) => {
        var state = !row.available ? 'locked' : ''
        if (att.inProgress === false && att.itemId === row.cr && st) {
          var show = true
          state = result || state
        }
        lis.push(
          <Cri // my list of the Components Cri
            {...row}
            action={this._atte(row.cri, row.available)}
            key={i}
            mediaType={medpe}
            showOutcome={showe}
            state={state}
          />
        )
      })
    return lis
  }
  render() {
    const { isLoaded } = this.state;
    return (
      <div className="main-container">
        <div className="sub-list">
          <div>
            {this._buildCrimesList()}
          </div>
        </div>
      </div>
    )
  }
}

标签： javascriptreactjsload

Answer 1

你可以这样做：

render() {
  const { isLoaded } = this.state;

  if (!isLoaded) {
    return <div>Loading..</div>;

  return (
    <div className="main-container">
      <div className="sub-list">
        <div>
          {this._buildCrimesList()}
        </div>
      </div>
    </div>
  )
}