React新手求助：如何在Header组件修改Search组件的useState状态？

你需要在Header组件中控制Search组件的show状态，这时候用状态提升就能解决问题——把原本放在Search里的状态移到两个组件共同的父组件中，再通过props传递状态和修改方法。

步骤1：创建共同父组件（比如App.jsx） #

把show状态和setShow方法定义在这里，作为两个子组件的统一数据源：

import Header from './Header';
import Search from './Search';
import React, { useState } from 'react';

function App() {
  // 将状态提升至父组件
  const [show, setShow] = useState(true);

  return (
    <div className="app">
      {/* 把修改状态的方法传给Header */}
      <Header setShow={setShow} />
      {/* 把状态和修改方法传给Search */}
      <Search show={show} setShow={setShow} />
    </div>
  );
}

export default App;

步骤2：修改Header.jsx #

接收父组件传来的setShow，在按钮点击时调用setShow(true)来显示Search组件：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
import React from 'react';

function Header({ setShow }) {
  return (
    <>
      <header className='header'>
        {/* 点击触发显示Search */}
        <button onClick={() => setShow(true)} id='logo' className='text-transparent bg-clip-text bg-gradient-to-{flow} h-14 bg-gradient-to-r from-cyan-500 to-blue-500'>W</button>
        <button className='button'>DTN<span className='text-transparent bg-clip-text bg-gradient-to-{flow} h-14 bg-gradient-to-r from-cyan-500 to-blue-500'>W</span></button>
        {/* 放大镜按钮也绑定同样的点击事件 */}
        <button onClick={() => setShow(true)} id='logoRight'><FontAwesomeIcon id='lupa' icon={faMagnifyingGlass}/></button>
      </header>
    </>
  );
}

export default Header;

注：移除了原代码中的<script>标签——在React组件中不需要这样引入FontAwesome，你已经通过npm包导入了组件，这个标签属于冗余代码。

步骤3：修改Search.jsx #

移除内部的show状态，改用父组件通过props传来的show和setShow：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
import React from 'react';

// 接收父组件传递的状态和方法
function Search({ show, setShow }) {
  return (
    show ? <>
      <div id='screen' className='screen'>
        <div className="inputContainer">
          <div className="input">
            <input id='inputScreen' type="text" placeholder='search the index...'/>
            {/* 点击按钮隐藏组件 */}
            <button onClick={() => setShow(false)} id='pesquisar' className="btnSearch"><FontAwesomeIcon id='lupa' icon={faMagnifyingGlass}/></button>
          </div>
        </div>
        <div className="message">
          <h3 className='text-center'>does not work...yet <br /> (just let me further study about await) </h3>
        </div>
      </div>
    </> : null
  );
}

export default Search;

核心逻辑说明 #

React的状态默认是组件私有，兄弟组件之间无法直接修改对方状态。状态提升是官方推荐的跨组件状态管理方案：把共享状态放到共同的父组件中，由父组件统一管理状态，再通过props分发给需要的子组件，以此实现组件间的状态同步。

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