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，当按钮被点击时，调用该函数并传递数据给父组件。父组件在接收到数据后更新自己的状态，并重新渲染以反映数据的变化。

父组件调用子组件方法

子组件

import React, { forwardRef } from 'react';

// 使用 React.forwardRef 包装子组件
const ChildComponent = forwardRef((props, ref) => {
  // 定义子组件的方法
  const childMethod = () => {
    console.log('Child method called');
  };

  // 将子组件的方法绑定到 ref
  React.useImperativeHandle(ref, () => ({
    childMethod,
  }));

  return (
    <div>
      <p>Child Component</p>
    </div>
  );
});

export default ChildComponent;

父组件

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  // 创建一个 ref 来引用子组件
  const childRef = useRef(null);

  // 在父组件中定义一个方法，用于调用子组件的方法
  const callChildMethod = () => {
    // 检查子组件是否已经挂载
    if (childRef.current) {
      // 调用子组件的方法
      childRef.current.childMethod();
    }
  };

  return (
    <div>
      {/* 将 ref 传递给子组件 */}
      <ChildComponent ref={childRef} />
      {/* 按钮用于触发父组件中的方法 */}
      <button onClick={callChildMethod}>Call Child Method</button>
    </div>
  );
};

export default ParentComponent;

子组件调用父组件的方法

父组件

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  // 定义父组件的方法
  const parentMethod = () => {
    console.log('Parent method called');
  };

  return (
    <div>
      {/* 将父组件的方法作为 prop 传递给子组件 */}
      <ChildComponent parentMethod={parentMethod} />
    </div>
  );
};

export default ParentComponent;

子组件

// 子组件 ChildComponent.js
import React from 'react';

const ChildComponent = ({ parentMethod }) => {
  const handleClick = () => {
    // 在子组件中调用父组件传递的方法
    parentMethod();
  };

  return (
    <div>
      <button onClick={handleClick}>Call Parent Method</button>
    </div>
  );
};

export default ChildComponent;