Reactjs 除了道具处理程序之外，还有更好的方法来设置和共享父子状态吗？

我正试图通过子组件

在父组件

上设置

化身

状态。它起作用了。但我想知道，这是正确的方法，还是有更好的方法？我正在调查所有可能的方法来做到这一点

另外，如果我有许多复杂的父子层次结构会怎么样。不使用Redux，我还能很好地管理它吗？我的目标是调查社区中的模式

起初，我感到惊讶的是，如果没有道具处理程序，我无法从孩子那里访问父母的状态。但后来我意识到React喜欢将其状态定位到组件。我仍然认为太多的道具是一种痛苦

import React, { Component } from 'react';
import Frame from './Frame';
import './App.css';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      avatar : 'http://placehold.it/128x128',
      text: ''
    }
  }

  changeUserAvatar = (avatar) => {
    let text = `{avatar} state change triggered from Child Component: ${avatar}`;
    this.setState({
        avatar,
        text
    });
  }

  render() {
    return (
      <div className="App">
        <p> Hello from Parent Component </p>
        <div className="Image">
          <img src={this.state.avatar}/>
        </div>
        <Frame onChangeUserAvatar={this.changeUserAvatar} consoleText={this.state.text} />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“./Frame”导入帧；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
阿凡达：'http://placehold.it/128x128',
文本：“”
}
}
changeUserAvatar=（avatar）=>{
let text=`{avatar}从子组件触发的状态更改：${avatar}`；
这是我的国家({
阿凡达
文本
});
}
render（）{
返回(
来自父组件的Hello

);
}
}
导出默认应用程序；

---

import React，{Component}来自'React'；
导入“/Frame.css”；
类框架扩展组件{
requestNewAvatarViaId=（e）=>{
const id=e.target.value；
如果（isNaN（id）| id=''）{
返回；
}
取回(`https://reqres.in/api/users/${id}`）
.那么(
响应=>{
response.json（）
.那么(
数据=>{
this.props.onChangeUserAvatar（data.data.avatar）；
}
)
}
);
}
render（）{
返回(
来自子组件的Hello
{this.props.consoleText}

);
}
}
导出默认帧；

有两种方法可以与您的孩子共享您父母的状态（如果您不使用Redux）： -使用道具 -使用上下文

依我看，如果你有一个复杂的体系结构，有几个嵌套的孩子，我建议你使用React提供的上下文API，否则就使用道具

---

通过这种方式，您提供的代码是更新父级状态的正确方法

这也是React文档中推荐的方法，因此这是一种很好的方法。我认为您所做的是非常直接和完美的。如果您有更多的子级要访问，那么您可以使用Redux Store您所说的contextContext是什么意思是一个新的React API这是文档

import React, { Component } from 'react';
import './Frame.css';

class Frame extends Component {

    requestNewAvatarViaId = (e) => {

        const id = e.target.value;
        if (isNaN(id) || id == '') {
            return;
        }

        fetch(`https://reqres.in/api/users/${id}`)
        .then(
            response => {
                response.json()
                .then(
                    data => {
                        this.props.onChangeUserAvatar(data.data.avatar);
                    }
                )
            }
        );
    }

    render() {
        return (
            <div className="Frame">
                Hello from Child Component <input type="number" min="1" onChange={this.requestNewAvatarViaId}/>
                <p> {this.props.consoleText} </p>
            </div>
        );
    }
}

export default Frame;