如何将状态传递给组件?React Native

wlp8pajw  于 2023-04-22  发布在  React
关注(0)|答案(2)|浏览(194)

我想将值为-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。

7fhtutme

7fhtutme1#

要在两个同级功能组件之间共享状态,需要将状态提升到它们的公共父组件。状态必须仅位于父组件中。
第一个屏幕:你只需要处理新的状态并提升到父组件。

export default function ScreenOne({ handleState }) {
  const navigation = useNavigation();

  return (
      <TouchableOpacity
          onPress={() => {
              handleState(3)
              navigation.navigate("ScreenTwo")
          }}
      >
          <Text>Go to another screen</Text>
      </TouchableOpacity>
  );
}

第二个屏幕:你只需要得到状态值。

export default function ScreenTwo({ state }) {
  return (
      <View>
          <Text>{state}</Text>
      </View>
  );
}

父组件:这里有useState,所以查尔兹组件可以像这样与它交互。

function Parent() {
  const [state, setState] = useState(1);

  return {
    <View>
      <ScreenOne handleState={(state) => setState(state)} />
      <ScreenTwo state={state} />
    </View>
  }
}
ftf50wuq

ftf50wuq2#

在React Native中,你可以将状态作为props从父组件传递给子组件。如果父组件中的状态发生变化,你可以使用一些技术来确保子组件也反映更新后的状态。
一种实现方法是使用props将更新后的状态从父组件传递给子组件。每当父组件中的状态发生更改时,您可以使用新状态更新传递给子组件的props。然后子组件可以使用这些更新后的props来呈现更新后的状态。
下面是一个如何实现此目标的示例:

父组件:

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
 const [state, setState] = useState('Initial State');
 const updateState = () => {
  setState('Updated State');
 };

 return (
 <View>
  <Text>{state}</Text>
  <ChildComponent state={state} />
  <Button title="Update State" onPress={updateState} />
</View>
);
};

export default ParentComponent;

子组件:

import React from 'react';
import { View, Text } from 'react-native';

const ChildComponent = (props) => {
return (
<View>
  <Text>{props.state}</Text>
</View>
);
};

export default ChildComponent;

在本例中,ParentComponent维护状态并将其作为名为“state”的prop向下传递给ChildComponent。每当父组件中的状态发生更改时,它将用新状态更新传递给子组件的prop。然后子组件可以使用此prop呈现更新后的状态。
请注意,如果父组件频繁重新渲染,这种方法可能会导致性能问题。在这种情况下,建议使用React Context或Redux以集中方式管理状态,并确保子组件接收更新的状态,而无需将其作为props传递下来。

相关问题