如何在不重新渲染嵌套组件的情况下有条件地渲染一个组件？

Question

我正在尝试在按钮按下时有条件地启用/禁用此ScrollView，同时不重新渲染其内部的View和CardDeck嵌套。 有什么想法吗？ 感谢所有帮助！

<>
  <ScrollView>
    <View >
        <CardDeck 
        infoStyles={handleInfoStyle}
        />
    </View>
  </ScrollView>
</>

- Preston

Answer 1

当你更新你的状态时，你只能处理显示和隐藏你的React应用中的任何内容，不会有任何改变。这个状态可以是一个View的不透明度，或者根据设置的一些状态来显示你的代码。

例如:

const[state,setState]=useState(false);
<>
  <ScrollView>
<Button title='hello' onPress={()=>{setState(!state)}} />
    <View >
        {state && <CardDeck 
        infoStyles={handleInfoStyle}
        />}
    </View>
  </ScrollView>
</>

只有在状态为true（点击后）时才会显示CardDeck。

- Amir Doreh

Answer 2

我在需要快速显示/隐藏自定义键盘（有大量按钮）时遇到了这个问题。您可以尝试类似于以下的代码：

<View style={this.state.showScrollView? {top: 0, bottom: 0, left: 0, right: 0, position: "absolute"} : {overflow: "hidden"}}>
    <ScrollView>
        ...
    </ScrollView>
</View>

你可能需要使用像React.memo或PureComponent这样的东西来使scrollview更加纯净，或者玩弄View的pointerEvents属性以使事情正常工作。但是，思路是在更高的级别上切换可见性，以便你的ScrollView可以舒适地保持不变。

- Fei

Answer 3

您可以直接使用本机属性启用/禁用滚动状态，这不会在任何地方触发重新渲染。

 onButonPress = () => {
     this.scrollViewRef.setNativeProps({ scrollEnabled: false })
 }

 <ScrollView ref={ref => this.scrollViewRef = ref}>
     <View>
         <CardDeck 
             infoStyles={handleInfoStyle}
         />
     </View>
 </ScrollView>

- angelos_lex