Question

我在事件执行时将状态设置为子组件，并希望将此状态发送给父组件。我在SO上搜索了此内容。但是仍然找不到任何方法。

假设我有一个父母组件家庭，并且有一个子组件用户。我正在 User 组件中执行一些事件，当时，我想将数据传递到 Home 组件。我该怎么办？

下面是我的代码：

/* Parent component */

import React, { Component } from 'react';
import User from './user';

class Home extends React.Component{
    constructor(props){
        super(props)
        this.state = {
           isReportSent: false
        }   
    }
    render(){
        <Switch>
           <Route exact path="/" component={User}/>
        </Switch>
    }
}

/* child component */
class User extends React.Component{
    constructor(props){
        super(props)
    }
    render(){

    }
}

注意：我的父组件是“路由”组件，在其中我要在特定路径上路由我的子组件。因此不能将任何函数传递给子组件。

Answer 1

您可以使用Routes中的render道具将回调方法传递给子级，然后您可以用它来更新父级

import React, { Component } from 'react';
import User from './user';

class Home extends React.Component{
    constructor(props){
        super(props)
        this.state = {
           isReportSent: false
        }   
    }
    performUpdate = () => {

    }
    render(){
        <Switch>
           <Route exact path="/" render={(props) => <User {...props} performUpdate={this.performUpdate}/>}/>
        </Switch>
    }
}

/* child component */
class User extends React.Component{
    constructor(props){
        super(props)
    }

    handleClick=() => {
       this.props.performUpdate(); //call to inform parent about change
    }
    render(){

    }
}

Answer 2

您实际上可以传递一个方法，只需要使用渲染道具即可。

<Switch>
   <Route exact path="/" render={(props)=><User {...props} someMethod={someMethod} />}/>
</Switch>

从子组件更新父组件状态

2 个答案: