Question

我在$ pyqtdeploy Traceback (most recent call last): File "/home/sergent/.local/bin/pyqtdeploy", line 8, in <module> sys.exit(main()) File "/home/sergent/.local/lib/python3.8/site-packages/pyqtdeploy/pyqtdeploy_main.py", line 69, in main gui = ProjectGUI(project) File "/home/sergent/.local/lib/python3.8/site-packages/pyqtdeploy/gui/project_gui.py", line 59, in __init__ self._set_project(project) File "/home/sergent/.local/lib/python3.8/site-packages/pyqtdeploy/gui/project_gui.py", line 220, in _set_project self._name_changed(self._project.name) File "/home/sergent/.local/lib/python3.8/site-packages/pyqtdeploy/gui/project_gui.py", line 160, in _name_changed title = os.path.basename(name) if name != '' else "Unnamed" File "/usr/lib/python3.8/posixpath.py", line 142, in basename p = os.fspath(p) TypeError: expected str, bytes or os.PathLike object, not NoneType中有2个嵌套的屏幕，我希望使用从一个屏幕到另一个屏幕（从navigator到Screen1.js）的功能。我要在Screen2.js中调用的函数是Screen2.js。这是addList()

Screen1.js

我尝试导入函数export default function Screen1({navigation}){ //... function addList (list){ //Code... }; //... }并在addList中使用它：

Screen2

但是，我的尝试没有成功。我该怎么做呢？

Answer 1

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

Answer 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')
        );

Answer 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（...）

如何从嵌套屏幕传递函数

3 个答案: