Question

我通过考虑某些条件来渲染我正在渲染的组件。它完成如下

const Test = () => {
    return <div className="text_align_center white_color">
        <span><i className="fa fa-exclamation-triangle" aria-hidden="true"></i>
            No internet connection. Please check your connection settings and try again
        </span>
    </div>
}

function checkInternetConnection(){

    isOnline().then(online => {

       if(online === true){

           console.log("Came in here")

            return <Test/>

        }

    });
}

然后我按照以下方式调用我的功能

const App = () => (
    <div className="ui container">

        {checkInternetConnection()}
);

但问题是尽管我在checkInternetConnection函数中获取控制台日志，但返回的组件没有出现。造成这种情况的原因是什么？

Answer 1

<Button.Content> <StackPanel> <Image Name="image1" Source="pack://application:,,,/OffPo Diagnostic Tool;component/resources/c_ml.bmp" Stretch="Fill" > <Image.Style> <Style TargetType="Image"> <Setter Property="Visibility" Value="Visible" /> <Style.Triggers> <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True"> <Setter Property="Visibility" Value="Collapsed" /> </DataTrigger> </Style.Triggers> </Style> </Image.Style> </Image> <Image Name="image2" Source="pack://application:,,,/OffPo Diagnostic Tool;component/resources/c_mo.bmp" Stretch="Fill" > <Image.Style> <Style TargetType="Image"> <Setter Property="Visibility" Value="Collapsed" /> <Style.Triggers> <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True"> <Setter Property="Visibility" Value="Visible" /> </DataTrigger> </Style.Triggers> </Style> </Image.Style> </Image> </StackPanel> </Button.Content>回调函数返回了<Test/>，而不是then函数。由于您是基于某些异步操作进行条件渲染，因此需要采用不同的方法才能使组件正确更新。

一个想法是将您的无状态组件变为有状态组件，方法是将其设为类，并在您的promise解析时调用 setState ：

checkInternetConnection

Answer 2

由于isOnline()有一个.then()子句，我认为它是一个异步的Promise？

如果是这样，那那就是你的罪魁祸首。当promise返回时，组件不会重新呈现，因为React仅在状态更改时呈现，这不是这里的情况。

要获得您描述的行为，请根据状态变量执行Test组件的呈现，并在promise返回时将其设置在.then()中。

返回组件内部功能不起作用

2 个答案: