React.js中如何将Header组件搜索栏数据传递到其他组件用于API查询

实现思路 #

两个组件为同级关系时，优先使用状态提升方案：将搜索关键词状态从Header组件移到二者的公共父组件中统一管理，父组件向Header传递状态更新方法，向Imagelist传递最新的搜索关键词，即可完成参数传递。 #

具体代码修改 #

1. 公共父组件（示例为App.jsx） #

import { useState } from 'react'
import Header from './Header'
import Imagelist from './Imagelist'
import './App.css'

function App() {
  // 将搜索状态提升到父组件管理
  const [searchQuery, setSearchQuery] = useState("")

  // 接收Header提交的搜索关键词
  const handleSearchSubmit = (query) => {
    setSearchQuery(query)
  }

  return (
    <div className="App">
      {/* 向Header传递提交处理方法 */}
      <Header onSearchSubmit={handleSearchSubmit} />
      {/* 向Imagelist传递搜索关键词作为API查询参数 */}
      <Imagelist query={searchQuery} />
    </div>
  )
}

export default App

2. 调整Header组件 #

import { useState } from 'react'
import ImageSearchIcon from '@material-ui/icons/ImageSearch';
import './Header.css'

// 接收父组件传入的提交方法
function Header({ onSearchSubmit }) {
    const [query, setQuery] = useState("");

    const handleSubmit = (event) => {
        event.preventDefault();
        // 提交时将搜索关键词传递给父组件
        onSearchSubmit(query)
    }

    return (
        <div className="Header">
            {/* LOGO */}
            <div className="branding">
                <ImageSearchIcon className="branding__logo" fontSize="large"/>
                <h1>Image Finder</h1>
            </div>

            {/* Search Bar */}
            <form onSubmit={handleSubmit}>
                <input type="text" id="header__searchbar" placeholder="Search For Images" value={query} onChange={(e) => setQuery(e.target.value)} />
            </form>
            

            {/* USER ICON */}
            <img className="user__image" src="https://www.pngitem.com/pimgs/m/150-1503945_transparent-user-png-default-user-image-png-png.png" alt="user__image" />
        </div>
    )
}

export default Header

3. 调整Imagelist组件 #

import { useEffect } from 'react'
import './Imagelist.css'

// 接收父组件传入的搜索关键词
const Imagelist = ({ query }) => {
    // 后续调用API时直接使用query作为查询参数即可，示例：
    useEffect(() => {
        if (!query) return
        // 调用图片搜索接口的逻辑写在这里，把query带入请求参数
        console.log("当前搜索参数：", query)
    }, [query])
    
    return (
        <div className="Imagelist">
            
        </div>
    )
}

export default Imagelist

其他适配场景 #

如果两个组件层级差超过2层，不想逐层传递props，可以使用useContext实现跨层级状态共享，无需额外引入第三方状态管理库。

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