javascript - 如何将函数传递给 react 中的另一个组件

Question

我是 React 新手，所以我有以下组件:

App组件这个组件有一个叫performSearch的函数，它还渲染了一个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  //Render Header Component
          />

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

这是 Header 组件，我想做的是为 Header 内的 Nav 组件提供来自 App 组件的 performSearch 函数，如下所示 <Nav onSearch={this.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;

Answer 1

问题是您正在使用 this.performSearch 就好像这样的函数是在 Nav 组件中定义的，但事实并非如此。您要将App 中的performSearch 函数传递给Nav:

应用组件

render() {
    //console.log(this.state.pics);
    return (
        //JSX inside ()
        <BrowserRouter>
            <div>
                {/* Pass the function as a prop down to Header */}
                <Header onSearch={this.performSearch}/>

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

标题组件

// 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>
    );
};

请注意，您需要将 props 定义为功能性 Header 组件的参数，以便访问 performSearch。

您还可以使用对象解构 语法直接访问该函数:

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>
    );
};