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

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

父传子

父组件

// ParentComponent.js
import React from 'react';
import { View } from 'react-native';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const dataFromParent = "Hello from Parent";

  return (
    <View>
      <ChildComponent data={dataFromParent} />
    </View>
  );
}

export default ParentComponent;

子组件

// ChildComponent.js
import React from 'react';
import { Text } from 'react-native';

const ChildComponent = ({ data }) => {
  return (
    <Text>{data}</Text>
  );
}

export default ChildComponent;

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

子传父

父组件

// ParentComponent.js
import 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 (
    <View>
      <Text>Data from Child: {dataFromChild}</Text>
      <ChildComponent onDataReceived={handleDataFromChild} />
    </View>
  );
}

export default ParentComponent;

子组件

// ChildComponent.js
import React from 'react';
import { Button } from 'react-native';

const ChildComponent = ({ onDataReceived }) => {
  const sendDataToParent = () => {
    onDataReceived("Hello from Child");
  };

  return (
    <Button title="Send Data to Parent" onPress={sendDataToParent} />
  );
}

export default ChildComponent;

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