Question

情况如下：我有一个Navigation和Login个组件。 Login只是一个导出的函数，用于记录用户。就是这样：

export function login() {
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then(() => {
                document.getElementById('close').click();
                document.getElementById('questions').click();
            }
        ).catch(e => console.log(e));
}

这几乎完美无缺。

这是我的Navigation组件

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>
                        {// The issue starts here
                            this.state.user ?
                                <React.Fragment>
                                    <LinkContainer id="questions" to='/questions'>
                                        <NavItem>Zadania</NavItem>
                                    </LinkContainer>
                                    <NavItem onClick={logout.bind(this)}>Wyloguj się</NavItem>
                                </React.Fragment>
                                :
                                <NavItem onClick={this.openLogin}>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>
                <ModalComponent show={this.state.show} changeShowState={this.changeShowState}/>
            </React.Fragment>
        </BrowserRouter>
    )
}

因此，当我将用户登录时，我希望他转移到Questions路线。我正试图用点击来做。但问题是，Questions链接尚未呈现，因此我收到了TypeError: "document.getElementById(...) is null"错误。

如何让它等到呈现组件？

Answer 1

您可以重定向用户programmatically。有几种方法可以做到这一点，例如：

如果您的Login组件展开React.Component，则您可以访问history对象，例如：

class Login extends React.Component {
   // use `this.props.history.push('/some/path')` here
};

因此，您可以将this.props.history传递到login功能，并在您登录时致电push：

export function login(history) {
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then(() => {
                history.push('/questions');
            }
        ).catch(e => console.log(e));
}

Answer 2

以您的方式访问DOM节点是一个非常糟糕的主意。

你应遵循的（反应）流程必须是：

用户输入他的凭据（假设您有preg_match('~^[A-Za-z]+$~',$value)组件）。
提交表格。
在提交时，您有一个回调函数，它将调用您的LoginForm函数并将凭证作为参数传递（不将登录函数与DOM节点耦合）。
如果一切正常，请使用login API将用户重定向到所需的路线。像react-router这样的东西。在这里，您可以阅读有关how to programmatically do the redirect。

伪码：

login(credentials).then(() => history.push('/questions'))

我建议您仔细查看Thinking in React官方文档。

Answer 3

你在哪里设置“用户”属性？如果用户被记录，也许尝试使用react-router中的“history.push”。

等待单击直到呈现元素

3 个答案: