React - 给我的子组件一个功能答案

【问题标题】：React - Giving a function to my Child ComponentReact - 给我的子组件一个功能
【发布时间】：2021-10-04 10:13:50
【问题描述】：

我正在努力从子级更新我的父级组件的状态。为此，我想将一个更新父母状态的函数作为参数传递给我的孩子：

export class Login extends Component {
      updateTurn() {
        console.log("UPDATE")
        this.setState(
            prevState => {
                UPDATING
            }
        );
    }

    render() {
          ROUTING MANAGEMENT
          <Route path="/play/pledge">
                <Pledge data={this.state.data} updateTurn={this.updateTurn}/>
          </Route>
          ROUTING MANAGEMENT
    }  
}
export class Game extends Component {

    constructor(props) {
        super(props);
        this.data = this.props.data;
    }

    render() {
        return (
            <div>
                <div className={"game"}>
                    { this.props.children }
                </div>
                <div className={"next"}>
                    <Link to={Launcher.getRandomGame()}>
                        <button className={"button"} onClick={this.props.updateTurn}>Next</button>
                    </Link>
                </div>
            </div>
        )
    }
}

不幸的是，没有发生任何事情，即使是console.log()

【问题讨论】：

我认为您调用的是 Pledge 而不是 Game 组件。
什么是<Pledge>？这是自定义组件吗？如果有，请附上它的代码。
接受incrementByOne 的Pledge 组件是什么？ Game 在哪里使用？我们甚至无法分辨这里的哪个组件是哪个子组件，Game 和 Login 似乎无关。
this.data = this.props.data; 是一种反模式。由于每次 React 调用 render() 时 this.props 的值都会发生变化，因此您应该直接访问它而不是将其保存到类变量中。
ROUTING MANAGEMENT 是无效的 JavaScript。要么将此评论设为合法评论，要么将其删除。

标签： javascript reactjs inheritance

【解决方案1】：

<Pledge data={this.state.data} updateTurn={this.updateTurn}/>

问题是您将函数传递给名为Pledge 的组件，但您应该改用Game：

<Game data={this.state.data} updateTurn={this.updateTurn}/>

【讨论】：