在父组件中使用子方法

Question

这是我的代码：

NavigationComponent-这是我的导航。 我希望单击此处的按钮来激发孩子的方法。

class NavigationComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentWillMount() {
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                console.log(user);
                this.setState(
                    {
                        user: user
                    }, () => this.props.checkUserState(this.state.user)
                );
            }
        });
    }

    render() {
        return (
            <BrowserRouter>
                <React.Fragment>
                    <Navbar>
                        <Navbar.Header>
                            <Navbar.Brand>
                                <Link id='home' to="/">UczIchApp</Link>
                            </Navbar.Brand>
                        </Navbar.Header>
                        <Nav>
                            <LinkContainer id='about' to='/about'>
                                <NavItem>O nas</NavItem>
                            </LinkContainer>
                            {
                                this.state.user ?
                                    <React.Fragment>
                                        <LinkContainer id="questions" to='/questions'>
                                            <NavItem>Zadania</NavItem>
                                        </LinkContainer>
                                        <NavItem onClick={Want to use it here}>Wyloguj się</NavItem>
                                    </React.Fragment>
                                    :
                                    <NavItem onClick={And here}>Zaloguj się</NavItem>
                            }
                        </Nav>
                    </Navbar>
                    <Switch>
                        <Route exact path="/about" component={AboutComponent}/>
                        <Route exact path="/questions" component={QuestionsComponent}/>
                        <Route exact path="/" component={HomeComponent}/>
                        <Route path='/question/:id' component={QuestionComponent}/>
                    </Switch>
                </React.Fragment>
            </BrowserRouter>
        )
    }
}

LogoutComponent-我希望激发此组件中的方法

export default class LogoutComponent extends react.Component {
    constructor(p) {
        super(p);
        this.logout = this.logout.bind(this);
        console.log('tada');
    }

    logout() {
        console.log('got here');
        firebase
            .auth()
            .signOut()
            .then(() => {
                this.setState({
                    user: null
                }, function () {
                    this.props.checkUserState(this.state.user)
                });
            });
    }
}

我想做的是，当单击导航栏上的按钮时使用logout（）函数。 问题是我不知道如何引用它。

我尝试了类似LogoutComponent.logout ，但是没有运气。 如果不可能，我该如何解决？

Answer 1

这可以通过使用React refs和子组件上的方法来完成。

parent.js

constructor() {
  super();
  this.child_ref = null;
}

createChildRef(DOMElement) {
  this.child_ref = DOMElement;
}

respondToSomeEvent() {
  if (this.child_ref) {
    this.child_ref.somePublicMethod();
  }
}

render() {
  return (
    <ChildComponent ref={this.createChildRef} />
  )
}

child.js

class ChildComponent extends React.Component {
  somePublicMethod() {
    // The parent can call this method through the React ref
  }
}

有时有必要根据应用程序的架构执行此操作，但是您应该考虑传递一个EventEmitter实例，以使您的组件可以响应存储在React中的状态以外的更改。