react父组件修改子组件的值

### 实现父组件修改子组件状态或属性

在React中，父组件可以通过`props`来影响子组件的行为。然而，直接操作子组件内部的状态并不是推荐的做法。通常情况下，应该把需要共享的状态提升到最近的共同祖先组件中管理。

#### 使用回调函数更新子组件状态

一种常见的方式是通过回调函数实现父子组件之间的通信：

1. **定义回调方法**

父组件创建一个用于改变子组件状态的方法，并作为prop传递给子组件[^4]。

2. **调用回调方法**

当特定条件满足时（比如点击按钮），子组件可以触发这个回调并携带必要的参数返回给父组件处理逻辑[^1]。

3. **同步状态变化**

如果确实有必要让父级控制子级的状态，则可以在接收到回调后由父级重新渲染整个树形结构下的子节点，此时可利用受控组件的概念，在每次更新前先通知子组件准备接收新的配置项[^5]。

下面是一个简单的例子展示上述过程:

// ParentComponent.jsx
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
    const [childStateValue, setChildStateValue] = useState('初始值');

    function handleUpdate(newState){
        console.log(`新状态:${newState}`);
        setChildStateValue(newState);
    }

    return (
        <div>
            <p>当前子组件状态:{childStateValue}</p>
            <ChildComponent updateState={handleUpdate}/>
        </div>
    );
};

export default ParentComponent;

// ChildComponent.jsx
class ChildComponent extends React.Component{
    constructor(props){
        super(props);

        this.state={
            message:"来自子组件的消息"
        }
    }

    handleChange=()=>{
        let newValue='已更改';
        // 调用父组件传来的updateState函数并将想要设置的新状态作为参数发送回去
        this.props.updateState(newValue);
        
        // 同步本地状态 (如果必要的话)
        this.setState({message:newValue});
    };

    render(){
        return(
            <>
                <button onClick={this.handleChange}>改变消息</button>
                <p>{this.state.message}</p>
            </>
        )
    }
}

在这个案例里，当用户按下按钮时，子组件会执行其自身的状态变更动作的同时也告知了父组件要做出相应的变化；而实际上真正负责维护该信息的是位于更高层次上的ParentComponent实例。