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

Posted 2023-02-25

【中文标题】在 React 中将数据从父级传递给子级

【英文标题】：Passing Data from Parent to Child In 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 不是一个函数。为什么会出现此错误？

【参考方案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，所以做点什么