Reactjs 有没有一种方法可以在没有强烈动画的情况下有条件地渲染组件

发布于12月19日

一种绕过Reaction渲染方法的方法？

也就是说，当有条件地呈现新组件时，下面的组件将进一步向下移动以容纳新条目，但动画感觉很有力，而不是像Transform:TranslateY等.

E.g Home.js


return (
<View>

   <View>
      <Text>Render Something </Text>
   </View>

   { showmore ? <Tasks /> : null}


   <TouchableOpacity>
        <Text> Button </Text>
   </TouchableOpacity>


   </View>
)

Tasks.js

return(
  <View> 
     <Text> render some  more things </Text>
     <Text> render some  more things </Text>
     <Text> render some  more things </Text>
     <Text> render some  more things </Text>
     <Text> render some  more things </Text>
</View> 

)

在上面的代码中，在"Showmore is Truthy"上，TouchableOpacity被强制向下以适应任务，我理解需要重新呈现布局，因为该空间先前被分配给=空.但我需要更多的流动性，而不是它.

我try 过硬编码的值，例如:

 { showmore ? <Tasks /> : <View style ={{marginVertical: 50}} />}

这为任务提供了更好的入口，而不需要将下面的组件往下推，因为空间已经被考虑到了(但我猜这是糟糕的做法)

--我还在<Tasks>中try 了onLayout，以根据派生的高度对下面组件的位置进行转换:TranslateY，但在我甚至可以在Home.js中获得值之前，已经呈现了的输出.

我对解决这个问题的另一种 Select 感到迷茫.有什么建议吗？

import { Animated, Easing, withTiming, useSharedValue, useAnimatedStyle } from 'react-native-reanimated'; const translateYValue = useSharedValue(0); useEffect(() => { LayoutAnimation.configureNext(LayoutAnimation.Presets.linear); translateYValue.value = withTiming(50, { duration: 100, easing: Easing.ease, }); }, [showmore])

Reactjs 有没有一种方法可以在没有强烈动画的情况下有条件地渲染组件

推荐答案

Reactjs相关问答推荐

props 可以在Reaction中锻造吗？

如何用Reaction做交互式的MathML？

面对动画警告：未指定`useNativeDriver`.这是必需的选项，并且必须在REACT本机中显式设置为`true`或`False`

无法使用 Suspense 和 Await 获取数据

标签文本删除了 MUI 概述的输入

如何将 MUI X 数据网格单元格方向更改为行级而不是列级？

Chakra UI：如何在选中状态下设置复选框 colored颜色

Firebase查询返回随机用户数据，而不是过滤后的用户数据

React Native 背景动画反转

无法设置 null 的属性(设置src)

计数器递增 2 而不是 1

单击按钮时如何添加或删除 3d 对象

将水平滚动视图添加到底部导航选项卡

Cypress 组件测试不渲染react 组件(但它的内容)

在 React 的父级中多次调用子级时从子级获取数据到父级

使用 React Router v6 监听来自不同组件的组件状态变化

如何将我的 ID 值传递给下一个组件？

在 redux 中分派到另一个减少时状态值不会改变

使用 React.UseEffect 从 api 获取但我的清理返回不起作用

如何跟踪 dexie UseLiveQuery 是否完成