如何有条件地渲染容器类

Question

首先，这是设计师http://www.giphy.com/gifs/hSRrqF5ObsbXH27V09给我的东西

基本上，有一个category 是从前一个屏幕传递过来的。并且通过一些 ui 交互，我需要一次又一次地渲染这个屏幕。流程是这样的：你选择一个category，如果它有subCategories，让用户在渲染输入组件之前选择其中一个subCategories。我可以使它与 if 和 else 子句一起使用，但我觉得这根本不是最佳实践。我只需要经验丰富的开发人员的建议（我对本机反应相对较新。） 所以在用本机方式编写任何代码之前，我只想在这里问一下，也许我可以了解更多。

这是我的屏幕：

  <NewAdHoc
                contentText={'Kategori Secimi'}
                onBackPress={this.handleBackPress}
                showContentText={false}
            >
                <View style={styles.container}>
                    {currentCategory !== null
                        ? (
                            <View style={{ ...styles.flatListContainer, paddingLeft: undefined, paddingRight: undefined }}>
                                <View style={{ marginHorizontal: 20 }}>
                                    <ListViewItem
                                        categoryName={currentCategory.categoryName}
                                        iconName={currentCategory.categoryIcon}
                                        showBorder={false}
                                        key={currentCategory.categoryId}
                                        categoryId={currentCategory.categoryId}
                                        inNewAdScreen={false}
                                    />
                                </View>
                                <Seperator
                                    backgroundColor={colors.SEPERATOR_BCK}
                                    text={'Ilan Turu'}
                                    style={{ paddingHorizontal: 20 }}
                                />
                                {
                                    currentCategory.subCategories.map((subc) => (
                                        <View style={{ marginHorizontal: 20 }}>
                                            <SubCategoryItem
                                                text={subc.subCategoryName}
                                                key={subc.subCategoryId}
                                                showBorder={true}
                                            />
                                        </View>
                                    ))

                                }
                            </View>
                        ) : null}
                </View>
            </NewAdHoc>

现在，我在类别和子类别以及子类别之间呈现category、<Seperator/>。我想要的是，当用户单击subCategories 之一时，我会将state 更改为isSubCategorySelected = true、selectedSubCategory= subCategoryId，然后需要像上面提供的gif 那样渲染整个屏幕。

Answer 1

对于那些来这里寻求答案的人：

我所做的基本上是分而治之的范式。我首先将我的情况分为两个主要状态。

1. RenderInitialForm(),

2. renderAfterSubCategorySelected(),

这两个渲染函数处理整个过程。当TouchableOpacity 被点击时，我setState 有两个变量：isSubCategorySelected = true，selectedSubCategory = subCategory

在我的主要render() 函数中：

    render() {
        const { currentCategory, isSubCategorySelected, selectedSubCategory } = this.state
        return (
            <NewAdHoc
                contentText={'Kategori Secimi'}
                onBackPress={this.handleBackPress}
                showContentText={false}
            >
                <View style={styles.container}>
                    {currentCategory !== null
                        ? isSubCategorySelected
                            ? this.renderAfterSubCategorySelected()
                            : this.renderInitialForm()
                        : null}
                </View>
            </NewAdHoc>
        );
    }

如果您对我的解决方案有任何建议，请随时与我联系。