我想将值为-3的状态传递给另一个使用值为-1的功能组件。我该怎么做?
我的代码:
屏幕1。
import { Text, TouchableOpacity } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";
export default function ScreenOne() {
const navigation = useNavigation();
const [myState, setMyState] = useState(1);
return (
<TouchableOpacity
onPress={() =>
navigation.navigate("ScreenTwo", setMyState(myState(3)))
}
>
<Text>Go to another screen</Text>
</TouchableOpacity>
); }
屏幕2。
import { View, Text } from "react-native";
import React from "react";
import { useRoute } from "@react-navigation/native";
export default function screenTwo() {
const [myState, setMyState] = useState(1);
const route = useRoute();
const setMyState = route.params;
return (
<View>
<Text>myState</Text>
</View>
); }
例如,第一个屏幕中的myState值为1,单击第一个屏幕中的按钮后,我需要将第二个屏幕中的myState值更改为状态3。
2条答案
按热度按时间7fhtutme1#
要在两个同级功能组件之间共享状态,需要将状态提升到它们的公共父组件。状态必须仅位于父组件中。
第一个屏幕:你只需要处理新的状态并提升到父组件。
第二个屏幕:你只需要得到状态值。
父组件:这里有useState,所以查尔兹组件可以像这样与它交互。
ftf50wuq2#
在React Native中,你可以将状态作为props从父组件传递给子组件。如果父组件中的状态发生变化,你可以使用一些技术来确保子组件也反映更新后的状态。
一种实现方法是使用props将更新后的状态从父组件传递给子组件。每当父组件中的状态发生更改时,您可以使用新状态更新传递给子组件的props。然后子组件可以使用这些更新后的props来呈现更新后的状态。
下面是一个如何实现此目标的示例:
父组件:
子组件:
在本例中,ParentComponent维护状态并将其作为名为“state”的prop向下传递给ChildComponent。每当父组件中的状态发生更改时,它将用新状态更新传递给子组件的prop。然后子组件可以使用此prop呈现更新后的状态。
请注意,如果父组件频繁重新渲染,这种方法可能会导致性能问题。在这种情况下,建议使用React Context或Redux以集中方式管理状态,并确保子组件接收更新的状态,而无需将其作为props传递下来。