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中。

在父组件中使用子方法

1 个答案: