在 React 中将数据从父级传递给子级答案

【问题标题】：Passing Data from Parent to Child In React在 React 中将数据从父级传递给子级
【发布时间】：2021-08-26 03:58:03
【问题描述】：

我正在测试是否可以将数据从父 App.js 传递到名为 Contact 的子组件。我想在点击按钮时传递数据。

这里是 App.js 文件：

import React, { useState } from 'react';
import { Button } from 'semantic-ui-react';
import './App.css';
import Header from './Components/Header';
import Tabs from './Components/Tabs';
import Footer from './Components/Footer';
import SimpleMap from './Components/SimpleMap';
import NewPatient from './Components/NewPatient';
import Contact from './Components/Contact';


function App() {

  const [data,setData] = useState(false);

  const parentToChild = () => {
    setData("This is information from parent to child.");
  }

  return (
    <div className="App">
      <Header />
      <Contact parentToChild={data} />
     <Tabs> 
       <div label="Home" class="home-page"> 
         <img src="https://news.usc.edu/files/2020/06/covid_vaccine_stock.jpg"></img>
       </div> 
       
       <div label="New Patient"> 
         <NewPatient />
       </div> 
       <div label="Locations"> 
         <SimpleMap />
       </div> 
       <div label="Appointments">
       </div>
     </Tabs> 
     <Footer />
    </div>
  );
}

export default App;

这里是我希望点击按钮时从父数据中显示数据的子组件：

import React from 'react';
import './footer.css'


function Footer({parentToChild})
{


    return (
        <div className="Footer">
            <div className="container">
                <div className="row">

                    <div className="col">
                        <h4 className="block ">About Us</h4>
                    </div>

                    <div className="col">
                        <h4 onClick={() => parentToChild(true)} className="block" >Contact</h4>
                    </div>

                    <div className="col">
                        <h4><a className="block" href={"https://www.cdc.gov/coronavirus/2019-ncov/faq.html"}>COVID-19 FAQ</a></h4>
                    </div>

                    <div className="col">
                        <h4 className="block"><a className="block" href={"https://www.cdc.gov/coronavirus/2019-ncov/if-you-are-sick/quarantine.html"}>CDC Guidelines</a></h4>
                    </div>

                </div>
            </div>
        </div>
    );
}

export default Footer;

我正在测试此功能，因为我希望最终在单击按钮时显示一个弹出表单。我想使用来自父组件的数据来触发子组件中的弹出窗口。下面的代码表明 parentToChild 不是一个函数。为什么会出现此错误？

【问题讨论】：

标签： reactjs

【解决方案1】：

您需要将 parentToChild 函数传递给您的页脚组件：

<Footer parentToChild={parentToChild}/>

如果你想显示你孩子的数据，你需要在你的参数中声明它：

const parentToChild = (input) => {
    console.log('Info from child' ,input);
    setData("This is information from parent to child.");
}

【讨论】：

【解决方案2】：

您必须通过 props 将该信息传递给 Footer 组件，

<Footer parentToChild={parentToChild} />

这将触发回调。

【讨论】：

【解决方案3】：

你可以使用状态。

const [state, setState] = useState('')

App.js

    const buttonThatYouWantTobeClicked = (dataShouldGotoComponent) => {
      setState(dataShouldGotoComponent)
    }
 
    <Footer data={state}/>

然后在footer.js中你可以检查props的值是不是undefiend或者null，所以做点什么

【讨论】：