Question

我有以下reactJS组件结构

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

子进程有一个执行不同API调用的函数。直到那个结束，子进程才准备好。那么有没有办法让我显示父母＆＃34;等待数据......＆＃34; 并调用子进程中的方法进行API调用

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

我尝试了两种方法，但都不成功

尝试在子项中调用一个方法而不渲染它.React.Children.map（this.props.children，（child）=＆gt; child.doAPICall（））但这个孩子似乎没有有其功能
动态覆盖渲染函数，使其不呈现任何内容，然后在子项完成API调用后将渲染方法交换回来

React.Children.map（this.props.children，（item，i）=＆gt;
（React.cloneElement（item，{ 渲染：（）=＆gt;假 }）））这将允许我覆盖道具但不覆盖渲染方法

任何建议都会受到很大关注

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

..希望你能得到这个想法：）

动态覆盖子渲染

1 个答案: