Javascript 如何在react中将函数传递给另一个组件

我是新的反应者，因此我有以下组成部分：

应用程序组件此组件有一个名为performSearch的函数，它还呈现标题组件

//this function will create the search feature
  performSearch = (text = 'dogs') => { //include text parameter from flickr api on url, and provide a default value for text parameter to display dog pics when the page first loads
     //fetch data from flickr
     axios
     .get(
       `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&text=${text}&per_page=24&format=json&nojsoncallback=1`
     )
     .then(response => {
       this.setState({
         pics: response.data.photos.photo
       });
     })
     .catch(error => {
       console.log("Something went wrong, could not access data", error);
     });
  };


  render() {
    //console.log(this.state.pics);
    return (
      //JSX inside ()
      <BrowserRouter>
        <div>
          <Header  //Render Header Component
          />

          <GalleryItem data={this.state.pics} />
          {/*pass data array to GalleryItem component */}
        </div>
      </BrowserRouter>
    );
  }
} //closes App

//此函数将创建搜索功能
performSearch=（text='dogs'）=>{//在url上包含flickr api中的text参数，并为text参数提供默认值，以便在页面首次加载时显示dog图片
//从flickr获取数据
axios
.得到(
`https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&text=${text}&per_page=24&format=json&nojsoncallback=1`
)
。然后（响应=>{
这是我的国家({
图片：response.data.photos.photo
});
})
.catch（错误=>{
log（“出现问题，无法访问数据”，错误）；
});
};
render（）{
//console.log（this.state.pics）；
返回(
//JSX内部（）
{/*将数据数组传递给GalleryItem组件*/}
);
}
}//关闭应用程序

这是Header组件，我想做的是给Header中的Nav组件提供来自App组件的performSearch函数，如下

{/*Render Nav menu and pass performSearch function*/}

我试图将该函数传递给Header中的Nav，但它不起作用，有人能帮忙吗

/* import react*/
import React from "react";

//import modules
import Form from "./Form";
import Nav from "./Nav";
import Gallery from "./Gallery";
// import Galleryitem from './Galleryitem'

/*Create a Header component that could store things 
like an app title, logo, nav and search bar.
 */
const Header = () => {
  return (
    //JSX inside ()
    <header>
      <Form /> {/*render the search bar*/}
       <Nav /> {/*Render Nav menu */}
      <Gallery /> {/*Render Gallery component  */}
    </header>
  );
};

/*Now export Header component so that we are able to import it 
  and use it within other components or modules of our app*/
export default Header;

/*导入响应*/
从“React”导入React；
//导入模块
从“/Form”导入表单；
从“/Nav”导入Nav；
从“/Gallery”导入库；
//从“/Galleryitem”导入Galleryitem
/*创建可以存储内容的标题组件
比如应用程序标题、徽标、导航和搜索栏。
*/
常量头=（）=>{
返回(
//JSX内部（）
{/*呈现搜索栏*/}
{/*渲染导航菜单*/}
{/*渲染库组件*/}
);
};
/*现在导出标题组件，以便我们能够导入它
并在我们应用程序的其他组件或模块中使用它*/
导出默认标题；

问题在于您使用的是

此。performSearch

就好像该功能是在

Nav

组件中定义的，而事实并非如此。您需要将

性能搜索功能从
应用程序
传递到
导航：

应用程序组件
您需要将执行搜索传递给标题组件，然后传递给导航组件。否则，您的导航组件将无法访问performSeach。此外，在传递performSearch时使用bind或arrow函数，否则performSearch将不会在应用程序组件上下文中执行

//this function will create the search feature
  performSearch = (text = 'dogs') => { //include text parameter from flickr api on url, and provide a default value for text parameter to display dog pics when the page first loads
     //fetch data from flickr
     axios
     .get(
       `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&text=${text}&per_page=24&format=json&nojsoncallback=1`
     )
     .then(response => {
       this.setState({
         pics: response.data.photos.photo
       });
     })
     .catch(error => {
       console.log("Something went wrong, could not access data", error);
     });
  };


  render() {
    //console.log(this.state.pics);
    return (
      //JSX inside ()
      <BrowserRouter>
        <div>
          <Header performSearch={this.performSearch.bind(this)}  //Render Header Component
          />

          <GalleryItem data={this.state.pics} />
          {/*pass data array to GalleryItem component */}
        </div>
      </BrowserRouter>
    );
  }
} //closes

//此函数将创建搜索功能
performSearch=（text='dogs'）=>{//在url上包含flickr api中的text参数，并为text参数提供默认值，以便在页面首次加载时显示dog图片
//从flickr获取数据
axios
.得到(
`https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&text=${text}&per_page=24&format=json&nojsoncallback=1`
)
。然后（响应=>{
这是我的国家({
图片：response.data.photos.photo
});
})
.catch（错误=>{
log（“出现问题，无法访问数据”，错误）；
});
};
render（）{
//console.log（this.state.pics）；
返回(
//JSX内部（）
{/*将数据数组传递给GalleryItem组件*/}
);
}
}//关闭

从“React”导入React；
//导入模块
从“/Form”导入表单；
从“/Nav”导入Nav；
从“/Gallery”导入库；
//从“/Galleryitem”导入Galleryitem
/*创建可以存储内容的标题组件
比如应用程序标题、徽标、导航和搜索栏。
*/
常量头=（{performSearch，}）=>{
返回(
//JSX内部（）
{/*呈现搜索栏*/}
{/*渲染导航菜单*/}
{/*渲染库组件*/}
);
};
/*现在导出标题组件，以便我们能够导入它
并在我们应用程序的其他组件或模块中使用它*/
导出默认标题；
这真的很有帮助！
// Accept component properties as first parameter
const Header = (props) => {
    return (
        //JSX inside ()
        <header>
            <Form /> {/*render the search bar*/}
                <Nav onSearch={props.onSearch}/> {/*Render Nav menu */}
            <Gallery /> {/*Render Gallery component  */}
        </header>
    );
};

// Accept component properties as first parameter
const Header = ({ onSearch }) => {
    return (
        //JSX inside ()
        <header>
            <Form /> {/*render the search bar*/}
                <Nav onSearch={onSearch}/> {/*Render Nav menu */}
            <Gallery /> {/*Render Gallery component  */}
        </header>
    );
};

//this function will create the search feature
  performSearch = (text = 'dogs') => { //include text parameter from flickr api on url, and provide a default value for text parameter to display dog pics when the page first loads
     //fetch data from flickr
     axios
     .get(
       `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&text=${text}&per_page=24&format=json&nojsoncallback=1`
     )
     .then(response => {
       this.setState({
         pics: response.data.photos.photo
       });
     })
     .catch(error => {
       console.log("Something went wrong, could not access data", error);
     });
  };


  render() {
    //console.log(this.state.pics);
    return (
      //JSX inside ()
      <BrowserRouter>
        <div>
          <Header performSearch={this.performSearch.bind(this)}  //Render Header Component
          />

          <GalleryItem data={this.state.pics} />
          {/*pass data array to GalleryItem component */}
        </div>
      </BrowserRouter>
    );
  }
} //closes

import React from "react";

//import modules
import Form from "./Form";
import Nav from "./Nav";
import Gallery from "./Gallery";
// import Galleryitem from './Galleryitem'

/*Create a Header component that could store things 
like an app title, logo, nav and search bar.
 */
const Header = ({ performSearch, }) => {
  return (
    //JSX inside ()
    <header>
      <Form /> {/*render the search bar*/}
       <Nav onSearch={performSearch}/> {/*Render Nav menu */}
      <Gallery /> {/*Render Gallery component  */}
    </header>
  );
};

/*Now export Header component so that we are able to import it 
  and use it within other components or modules of our app*/
export default Header;