javascript - 如何在 React Native 中隐藏 Accordion 特定内容

Question

在这个例子中，我想显示和隐藏 Accordion 内容的功能。这是我的源代码。

state = {
    check: true,
};

 renderContent = (order, _, isActive) => {
    //Accordion Content   
    return (
         <View style={styles.child}>
                   <View>
                     <Text>Hello World</Text>
                   </View>

                   <View>
                     <Text>Goodbye</Text>
                   </View>
                }
         </View>
        )
}

render() {
    return (
        <View style={styles.scrollMain}>
                <CheckBox
                    value = { this.state.check}
                    onValueChange={(newValue) => this.setState({check:newValue})}/> // this is my checkbox
                <Accordion
                    .....
                    renderContent={this.renderContent}
                    }/> 
            }
        </View>
    );

我想做的是如果我点击复选框，它应该隐藏下面的内容

                `<View>
                  <Text>Goodbye</Text>
                </View>`

当我取消选中复选框时，它应该返回。请告诉我我该怎么做？

Answer 1

你好，你几乎已经完成了，你只需要考虑 this.state.check 条件是将处理内容的条件，所以你有几个选项来实现这一点:

• 您可以创建另一个组件来处理此逻辑。
• 改为使用 JSX block 来处理此逻辑。
• 或者您可以将 css 与类或类似的东西一起使用，以隐藏内容，但元素将始终存在。

我认为这个决定涉及您的用例，但一种直接的方法是将逻辑封装在 JSX block 中

renderContent = (order, _, isActive) => {
    //Accordion Content   
    return (
         <View style={styles.child}>
                   <View>
                     <Text>Hello World</Text>
                   </View>

                   {
                    !this.state.check?
                     <View>
                      <Text>Goodbye</Text>
                     </View> 
                    : null
                   }
                }
         </View>
        )
}