如何从嵌套屏幕传递函数答案

【问题标题】：How to pass a function from nested screens如何从嵌套屏幕传递函数
【发布时间】：2020-09-05 13:37:35
【问题描述】：

我在navigator 中有 2 个嵌套屏幕，我希望使用从其中一个屏幕到另一个屏幕的函数（从 Screen1.js 到 Screen2.js）。我想在Screen2.js 中调用的函数是addList()。这是Screen1.js

export default function Screen1({navigation}){
   //...

  function addList (list){
   //Code...
   };

  //...
}

我已尝试导入函数addList 并在Screen2 中像这样使用它：

import addList from './Screen1

//...

export default function Screen2({navigation}){
  //...

  function createSomething(){
    //...   
    addList(list);
    //...         
  }

  //...
}

但是，我的尝试没有成功。我该怎么做才能做到这一点？

【问题讨论】：

标签： reactjs function react-native navigation react-native-navigation

【解决方案1】：

addList 应该在父组件中。这样你就可以在 screen1 和 screen2 中将函数作为 props 传递。

【讨论】：

你的意思是 addList 函数应该在 Screen1 函数之外吗？然后将所需的状态作为道具传递？
是的，这是我不使用参考的解决方案。但是 Ajmal Hasan 的解决方案也很好。

【解决方案2】：

使用钩子和函数组件

import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'

    const { forwardRef, useRef, useImperativeHandle } = React;
        
        // We need to wrap component in `forwardRef` in order to gain
        // access to the ref object that is assigned using the `ref` prop.
        // This ref is passed as the second parameter to the function component.
        const Child = forwardRef((props, ref) => {
        
          // The component instance will be extended
          // with whatever you return from the callback passed
          // as the second argument
          useImperativeHandle(ref, () => ({
        
            getAlert() {
              alert("getAlert from Child");
            }
        
          }));
        
          return <h1>Hi</h1>;
        });
        
        const Parent = () => {
          // In order to gain access to the child component instance,
          // you need to assign it to a `ref`, so we call `useRef()` to get one
          const childRef = useRef();
        
          return (
            <div>
              <Child ref={childRef} />
              <button onClick={() => childRef.current.getAlert()}>Click</button>
            </div>
          );
        };
        
        ReactDOM.render(
          <Parent />,
          document.getElementById('root')
        );

【讨论】：

如何在第二个不同的孩子中调用 getAlert()？通过将第一个孩子 ref 传递给第二个孩子道具？
您需要将子组件包裹在 forwardRef 中以使其按原样工作。

【解决方案3】：

如果我用 Ajmal 解决方案做你想做的事，我认为应该是：

import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'

const { forwardRef, useRef, useImperativeHandle } = React;
    
    // We need to wrap component in `forwardRef` in order to gain
    // access to the ref object that is assigned using the `ref` prop.
    // This ref is passed as the second parameter to the function component.
    const Screen1 = forwardRef((props, ref) => {
    
      // The component instance will be extended
      // with whatever you return from the callback passed
      // as the second argument
      useImperativeHandle(ref, () => ({
    
        addList() {
          alert("getAlert from Child");
        }
    
      }));
    
      return <h1>Hi</h1>;
    });

    const Screen2 = (props) => {
      return (
       <div>
         ....
         <button onClick={(e) => props.screen1Ref.addlist(...)}>addList</button>
       </div>
      )
    }
    
    const Parent = () => {
      // In order to gain access to the child component instance,
      // you need to assign it to a `ref`, so we call `useRef()` to get one
      const screen1Ref = useRef();
    
      return (
        <div>
          <Screen1 ref={screen1Ref} />
          <Screen2 screen1Ref={screen1Ref} />
        </div>
      );
    };
    
    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    );

现在，在 screen2 中你可以调用 props.screen1Ref.addList(...)

【讨论】：