RN的父传子和子传父(函数式组件)

在React Native��，父组件向子组件传递数据通常通过props实现，而子组件向父组件传递数据则通常通过回调函数实现。下面是一个简单的示例，演示了父组件向子组件传递数据和子组件向父组件传递数据的方法：

父传子

父组件

// ParentComponent.jsimport React from 'react';import { View } from 'react-native';import ChildComponent from './ChildComponent';const ParentComponent = () => {  const dataFromParent = "Hello from Parent";  return (          dataFromParent} /      );}export default ParentComponent;

子组件

// ChildComponent.jsimport React from 'react';import { Text } from 'react-native';const ChildComponent = ({ data }) => {  return (    {data}  );}export default ChildComponent;

在这个例子中，父组件ParentComponent通过props向子组件ChildComponent传递了一个名为data的数据。

子传父

父组件

// ParentComponent.jsimport React, { useState } from 'react';import { View, Text } from 'react-native';import ChildComponent from './ChildComponent';const ParentComponent = () => {  const [dataFromChild, setDataFromChild] = useState('');  const handleDataFromChild = (data) => {    setDataFromChild(data);  };  return (          Data from Child: {dataFromChild}      handleDataFromChild} /      );}export default ParentComponent;

子组件

// ChildComponent.jsimport React from 'react';import { Button } from 'react-native';const ChildComponent = ({ onDataReceived }) => {  const sendDataToParent = () => {    onDataReceived("Hello from Child");  };  return (    sendDataToParent} /  );}export default ChildComponent;

在这个例子中，子组件ChildComponent通过接收一个名为onDataReceived的prop，当按钮被点击时，调用该函数并传递数据给父组件。父组件在接收到数据后更新自己的状态，并重新渲染以反映数据的变化。