从 REACT 17 中文件 functionComponentA 中的函数组件 B 中的文件 fileA 中的类组件 ClassComponentA 调用名为 functionA 的函数

Posted 2023-02-23

【中文标题】从 REACT 17 中文件 functionComponentA 中的函数组件 B 中的文件 fileA 中的类组件 ClassComponentA 调用名为 functionA 的函数

【英文标题】：Call function named functionA from class component ClassComponentA in file fileA in function component B in file functionComponentA in REACT 17

【发布时间】：2021-04-12 14:18:32

【问题描述】：

我有两个组件，一个是类组件，另一个是函数组件。 我想调用放置在classComponentA中的functionComponentA中的方法。 我通过在道具中发送方法来做到这一点。 我不想这样做

import React,  Component  from 'react'
import functionComponentA from './functionComponentA'
class ClassComponentA extends Component 
    constructor(props) 
        super(props)
        this.state = 
            coolVariable : 1
    

    functionA= () => 
        return "something"

    render()

    const functionComponentA = <functionComponentA method= this.doStuff.bind()/>
    return functionComponentA
    

export default ClassComponentA

//the code below is in a different file
import ClassComponentA from './ClassComponentA'
function FunctionComponentA (props)
    return <input onBlur= event => ClassComponentA.functionA()/>

export default FunctionComponentA

当我按照上面的代码执行时，我得到 ClassComponentA__WEBPACK_IMPORTED_MODULE_2__.default.functionA is not a function 我不想将该函数作为道具发送，但我想从放置其他组件的文件中调用它。可以以任何方式完成吗？我做错了什么？

import React,  Component  from 'react'
import functionComponentA from './functionComponentA'
class ClassComponentA extends Component 
    constructor(props) 
        super(props)
        this.state = 
            coolVariable : 1
    

    functionA= () => 
        return "something"

    render()

    const functionComponentA = <functionComponentA method= this.doStuff.bind()/>
    return functionComponentA
    

export default ClassComponentA

//code below is from a different file
function FunctionComponentA (props)
    return <input onBlur= event => props.functionA()/>

export default FunctionComponentA

【问题讨论】：

我认为functionComponentA 应该以大写字母开头。 functionA 仅在“实例化”后可用

【参考方案1】：

你的错别字很多，基本错误很少：

// typo: functionComponentA, no need to bind if you use arrow function
// there is no function doStuff, rename from functionA
<FunctionComponentA method=this.doStuff/>

// call method() as the prop name and not functionA().
function FunctionComponentA (props)
    return <input onBlur=()=> props.method() />

最后代码应该是这样的：

class ClassComponentA extends Component 
  doStuff = () => 
    console.log("hello");
  ;
  render() 
    return <FunctionComponentA method=this.doStuff />;
  


function FunctionComponentA(props) 
  return <input onBlur=props.method />;