反应动态覆盖子渲染

Question

我有以下 reactJS 组件结构

<Parent>
    <Child1/>
</Parent>
<Parent>
    <Child2/>
</Parent>

孩子有一个执行不同 API 调用的函数。在完成之前，孩子还没有准备好被渲染。那么有没有办法让我有父显示 “等待数据……” 并调用child中的方法进行API调用

在孩子中，我希望有一个简单的渲染方法，它不必检查 get API 调用是否已完成

我尝试了两种方法，但都失败了

1. 尝试在子进程中调用一个方法而不渲染它。React.Children.map(this.props.children, (child)=>child.doAPICall()) 但这个子进程似乎没有它的功能可用

2. 动态覆盖渲染函数，使其不渲染任何内容，然后在子进程完成 API 调用后将渲染方法交换回来

   React.Children.map(this.props.children, (item, i) =>
   (React.cloneElement(item, { 渲染：（）=>假 }))) 这将允许我覆盖道具但不能覆盖渲染方法

任何建议都会非常感谢

Answer 1

您应该进行条件渲染。我会建议以下两种方式之一：

• 在父组件中。执行必要的 API 调用以播种数据，然后在数据准备就绪时呈现子项。
• 或在儿童中。执行数据调用（例如在 componentDidMount 中），然后在数据准备好时渲染数据。在此之前呈现其他内容，即一些文本或显示“正在加载”的图像。

无论您是否决定有条件地从父级渲染子级，或者您只是决定在子级渲染中自己进行条件渲染，它看起来像这样：

render() {
    return (
        <div>
        {this.state.data? 
            <div>{this.state.data.somedata}</div>
        :
            <div>Loading...</div>}
        </div>
    );
}

甚至：

render() {
    if (!this.state.data) {
        return <div>Loading...</div>
    }
    return (
        <div>
            <div>{this.state.data.somedata}</div>
        </div>
    )

}

最后，一个更简洁的条件渲染方法是使用以下语法：

render() {
  return(
      <div>
          {this.state.data && <div>{this.state.data.someField}</div>}
      </div>
   );
}

例如

render() {
  return this.state.data && <div>{this.state.data.someField}</div>;
}

.. 希望你能明白 :)