在父組件中使用子方法

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中的狀態以外的更改。