Question

我正在尝试通过子组件avatar在父组件<App/>上设置<Frame/>状态。有用。但我想知道，这是正确的方式，还是有更好的方法？我正在调查所有可行的方法。

此外，如果我有许多复杂的父子层次结构，该怎么办？我可以在不使用Redux的情况下以这种方式很好地管理它吗？我的目标是在这里调查社区中的模式。

最初，我很惊讶我没有支持处理程序，无法从Child访问Parent's状态。但后来我意识到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 } 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;

Answer 1

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

IMO，如果您有一个包含多个嵌套子项的复杂架构，我建议您使用React提供的上下文API，否则请使用道具。

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

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

1 个答案: