javascript - 如何在本机反应中将数据从一个组件传递到另一个组件

Question

我有一个主要组件，我在其中导入了一个组件，所以我想将一些数据从该导入组件传递到主要组件并显示它。这是一个示例代码：这是我的主文件：

import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
import TestComponent from "../components/TestComponent";
function TestScreen(props) {
  return (
    <View>
      <TestComponent />
      <Text>{location}</Text>
    </View>
  );
}

export default TestScreen;

这是导入的组件：

import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
function TestComponent(props) {
  const [location, setLocation] = useState("");
  return (
    <View>
      <Text>Boiler</Text>
      <TouchableOpacity>
        <Text onPress={() => setLocation("Me")}>Click</Text>
      </TouchableOpacity>
    </View>
  );
}

export default TestComponent;

现在我想从组件中获取location钩子并将其用于组件，我该怎么做TestComponentTestScreen

标签： javascriptreactjsreact-nativereact-hooks

Answer 1

您应该将状态提升到父组件

function TestScreen(props) {
  const [location, setLocation] = useState("");
  return (
    <View>
      <TestComponent setLocation={setLocation} location={location}/>
      <Text>{location}</Text>
    </View>
  );
}


function TestComponent({ location, setLocation }) {
  return (
    <View>
      <Text>Boiler</Text>
      <TouchableOpacity>
        <Text onPress={() => setLocation("Me")}>Click</Text>
      </TouchableOpacity>
    </View>
  );
}

现在您可以访问location父级