Question

我的一个组件有大约四种不同的状态，每个状态都有自己的全屏视图（加载，错误/重试和其他2个）。

现在我的渲染功能如下所示：

render() {
    return (
        <View style={{flex: 1, flexDirection: 'column'}}>
            {this.renderLoadingView()}
            {this.renderEmptyView()}
            {this.renderErrorView()}
            {this.renderInterviewListView()}
            {this.renderInterviewFeedbackRequestViews()}
        </View>
    );
}

但是其他每个人都看起来像这样，如果他们不满足许多条件，他们要么呈现null，要么如果满足所有条件，他们会呈现视图：

renderLoadingView() {
    if (this.state.showLoading && !this.state.showError) {
        return (
            <View>
                [...]
            </View>
        );
    } else {
        return null;
    }
}

renderErrorView() {
    if (this.state.showError) {
        return (
            <InterviewsErrorView onRetry={() => this.onRefresh()}/>
        );
    } else {
        return null;
    }
}

renderInterviewListView() {
    var showEmpty = this.state.emptyFeedbackRequests && this.state.emptyInterviews;
    if (this.state.showLoading || this.state.showError || showEmpty) {
        return null;
    } else if (!this.state.emptyFeedbackRequests) {
        return null;
    } else {
        return (
            <View>
                [...]
            </View>
        );
    }
}

这感觉很麻烦，特别是因为多个视图依赖于同一个东西（例如showLoading是否为真）。有没有办法可以简化这个或使其更清洁？

Answer 1

在渲染方法中使用条件并将其从辅助方法中删除。您的渲染方法应如下所示：

render() {

  const showEmpty = this.state.emptyFeedbackRequests && this.state.emptyInterviews;

  return (
    <View style={{flex: 1, flexDirection: 'column'}}>
        { this.state.showLoading && this.state.showError && this.renderLoadingView()}
        {this.renderEmptyView()}
        {this.state.showError && this.renderErrorView()}
        {(this.state.showLoading || this.state.showError || shosEmpty) && this.renderInterviewListView()}
        {this.renderInterviewFeedbackRequestViews()}
    </View>
  );
}

这将使您的帮助方法更清洁，并将从其中删除其他部分。通过查看您的问题，我无法确定您的视图中的公共代码。

但是如果有一些共同点，你可以通过在方法中引入参数来进一步优化代码并减少辅助方法的数量。

React Native：如何使用耦合条件渲染多个条件视图？

1 个答案: