React中如何在functionB内调用functionA？新手求简易解决方案

问题情况 #

之前直接用ReactDOM渲染了functionA，现在要在functionB里调用functionA，但一调用就弹出Invalid Hook Call错误（截图如下），而且要求两个函数得在同一个父组件里。

原有代码 #

functionA(value, name) {
   /*some code*/

   return (
     /*some code*/
   )
}

functionB() {
    /*some code*/
    // 这里怎么调用functionA？

}

const firstFunction = ReactDOM.createRoot(document.getElementById('firstFunction'));


firstFunction.render(
   <functionA 2 Alex />
)

问题根源 #

这个错误是违反了React Hook的调用规则——Hook只能在React函数组件的最顶层调用，不能在普通函数、循环、判断或者嵌套函数里调用。如果functionA内部使用了Hook，直接在functionB里当普通函数调用必然触发报错。

简易解决方案 #

创建一个父组件App，将functionA和functionB作为子组件纳入其中，严格遵循React组件的编写规范：

修正后代码 #

// React组件名必须首字母大写，否则会被识别为普通HTML标签
function FunctionA({ value, name }) {
   /*some code*/

   return (
     /*some code*/
   )
}

function FunctionB() {
    /*some code*/
    // 需要调用functionA时，直接将其作为组件渲染
    return (
      <div>
        <FunctionA value={2} name='Alex' />
      </div>
    )
}

// 父组件App，统一管理两个子组件
function App() {
    return (
      <div>
        <FunctionA value={2} name='Alex' />
        <FunctionB />
      </div>
    )
}

const indexPage = ReactDOM.createRoot(document.getElementById('indexPage'));

indexPage.render(
   <App />
)

关键注意事项 #

• 组件名称必须首字母大写，这是React的硬性规范，小写名称会被当作原生HTML标签处理，直接引发错误
• 组件接收参数需通过props对象（如FunctionA({ value, name })），不能使用普通函数的位置传参方式
• 如果functionA包含Hook逻辑，必须将其作为组件渲染；若只是纯业务逻辑，可以拆分出独立的工具函数，在两个组件中分别调用即可

内容的提问来源于stack exchange，提问作者Руслан Василев