React子组件向父组件传值异常：点击按钮有日志但颜色未变更

你遇到的问题核心有两点：

1. App组件传给Header的color是硬编码的固定值"slategrey"，而非state变量color，所以即使state更新，Header接收的color不会变化，界面看不到更新。
2. 点击按钮时传递的是固定的props.color，多次点击只会把state设为同一个值，自然看不到变化。

第一步：修正App组件，让Header接收state中的color #

修改App.js，把传给Header的color改为state变量，同时补上Header用到的name属性：

import React,{useState} from 'react';
import Header from './components/header'
import './css/main.css'

const App = ()=>{
  const [color, setColor] = useState('red');
  // 改为切换颜色的逻辑，而非接收固定值
  const toggleColor = ()=>{
    setColor(prevColor => prevColor === 'red' ? 'slategrey' : 'red');
  }
  // 这里把state的color传给Header，同时传递切换方法
  return(<Header colorMethod={toggleColor} color={color} name="Header"/>);
}

export default App;

第二步：调整Header组件的按钮逻辑 #

因为父组件的方法现在不需要接收参数，直接调用即可：

import React from 'react';

const Header = (props)=>{
    const myStyle = {
    header:{
        background : 'lightslategrey',
        padding: "10px",
        fontFamily: "Sans-Serif",
        display:'grid',
        gridGap:'20px'
    },
    button:{
        background :'slateblue',
        color :'whitesmoke'
    }
  };
    return(
    <header style={myStyle.header}>
        This is a {props.name} and it is generally the {props.color} component that we see.
        <button style={myStyle.button} onClick={props.colorMethod}>Change</button>
    </header>
    );
}

export default Header;

如果需要多个组件共享并修改同一个状态，遵循以下原则：

• 把共享状态放在这些组件的共同父组件（比如App）中管理。
• 把状态值和修改状态的方法通过props传递给所有需要的子组件。
• 子组件通过调用父组件传递的方法来修改状态，所有依赖该状态的组件会自动更新。

如果组件层级较深，避免props层层传递的麻烦，可以使用React Context来全局共享状态，但对于简单的组件结构，直接props传递更直观。

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