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

【问题标题】：How to conditionally render a component without re-rendering the nested components?如何在不重新渲染嵌套组件的情况下有条件地渲染组件？
【发布时间】：2020-05-18 21:47:56
【问题描述】：

我试图在按下按钮时有条件地启用/禁用此 ScrollView，而不重新渲染嵌套在其中的 View 和 CardDeck。有任何想法吗？所有帮助表示赞赏！

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

【问题讨论】：

标签： reactjs react-native rendering

【解决方案1】：

您只能处理在您的反应应用程序中显示隐藏任何东西，当您更新您的状态时，也不会发生任何变化，此状态可以是 View 的不透明度或如下设置某些状态并根据该显示你的代码。

举个例子：

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

只有当状态为真时才会显示 CardDeck（点击后）

【讨论】：

【解决方案2】：

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

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

（您可能需要使用 React.memo 或 PureComponent 之类的东西来使滚动视图成为纯视图，和/或使用 View 的 pointerEvents 属性来使事情正常工作。）但想法是在更高级别切换可见性所以你的 ScrollView 可以舒适地保持不变。

【讨论】：

【解决方案3】：

您可以直接使用原生 props 启用/禁用 scoll 状态，这不会在任何地方触发任何重新渲染。

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

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

【讨论】：