Question

我希望在反应组件呈现之前进行一些检查..

假设我有一个可以呈现类似

的组件

render() {
    const {videos, actions} = this.props

    return (
        <div>
            <List />
        </div>
    )
}

但在呈现列表之前，我希望对列表进行自定义检查... 我想说的是在显示我想要检查的<List />组件之前，只有在检查完成后我才想用render方法显示组件..

我在这里提到的支票可能就像列表应该是10个计数或任何东西。

我试过以下

componentWillUpdate(){
    console.log("Component will update")
}

shouldComponentUpdate(){
    console.log("Should component update")
}

从反应文档中我知道在渲染之前都会调用它们...但是当我这样做时，控制台中没有打印任何内容，但调用了render方法。

我知道在渲染之前调用了componentWillMount()但是我想要的是一个只在完成后调用渲染或从函数返回的函数

希望您理解并需要帮助

Answer 1

在render（）函数中，您可以在返回JSX / elements之前运行检查：

render() {
  // run any checks here
  const {videos, actions} = this.props

    return (
    <div>
        <List />
    </div>
    )
}

Answer 2

您可以从渲染中及早返回具有不同的结果。当道具更改时，将使用较新的道具再次调用渲染。

class MyComponent {
  render() {
    const { items } = this.props;
    if (items.length < 10) return <span>Loading...</span>;

    return <List items={items} />;
  }
}

在渲染

2 个答案: