React父组件向子组件传值报错parentToChild不是函数如何解决

• props传递的目标组件错误：你定义的parentToChild函数仅传递给了Contact组件，但实际调用该函数的是Footer组件，Footer组件没有接收到名为parentToChild的props，解构后的值为undefined，调用时自然会提示不是函数。
• props传递的内容错误：即使在Contact组件中调用parentToChild也会报错，你当前给Contact传递的parentToChild属性值是data状态变量（初始为布尔值，后续为字符串），不是你定义的parentToChild函数。
• 函数参数不匹配：你在Footer中调用parentToChild(true)时传入了布尔值参数，但父组件定义的parentToChild没有设置形参接收该值，无法响应你传的控制参数。

1. 修改App.js代码 #

调整props传递逻辑，把parentToChild函数传给Footer，把需要共享的data状态传给Contact：

// App.js中return部分修改后代码
return (
  <div className="App">
    <Header />
    {/* 把data状态传给Contact，用来控制弹窗/接收父组件数据 */}
    <Contact dataFromParent={data} />
   <Tabs> 
     <div label="Home" class="home-page"> 
       <img src="https://news.usc.edu/files/2020/06/covid_vaccine_stock.jpg" alt="covid vaccine"></img>
     </div> 
     
     <div label="New Patient"> 
       <NewPatient />
     </div> 
     <div label="Locations"> 
       <SimpleMap />
     </div> 
     <div label="Appointments">
     </div>
   </Tabs> 
   {/* 把parentToChild函数传给Footer，供点击事件调用 */}
   <Footer parentToChild={parentToChild} />
  </div>
);

同时调整父组件parentToChild函数，接收Footer传来的参数：

const parentToChild = (value) => {
  setData(value);
  // 如果需要点击后传递固定文本也可以写setData("需要传递的文本")，按你的需求调整即可
}

2. 调整Contact组件逻辑 #

在Contact组件中接收dataFromParent props，用来控制弹窗显隐或者展示父组件传递的内容即可，示例：

function Contact({dataFromParent}) {
  return (
    <>
      {/* dataFromParent为true时显示弹窗 */}
      {dataFromParent && <div className="contact-modal">
        {/* 弹窗表单内容 */}
      </div>}
    </>
  )
}

内容的提问来源于stack exchange，提问作者user5019516