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

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

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

RenderInitialForm()，
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>
        );
    }

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

如何有条件地渲染容器类

1 个答案: