Question

我正在使用visual studio 2017中的typescrpit在reactjs中开发一个webapp，这对我来说是一项非常新的技术。我遇到了一个问题，我不知道如何从另一个组件重新渲染组件。

我有一个登录页面。我想要做的是在用户登录时在我的标题组件中显示用户名。唯一的问题是，标题组件对于我的所有网页都是通用的。以下是我的layout.tsx文件： -

export interface LayoutProps {
children?: React.ReactNode;
}

export class Layout extends React.Component<LayoutProps, {}> {
public render() {
    return <div>
        <Header />
        <div className='layout_wrapper'>
            {this.props.children}
        </div>
        <Footer />
    </div>;
}
}

这是我使用标头组件的唯一文件，因此我不必在我创建的每个组件中使用它。 header组件的componentDidMount（）将检查访问令牌并进行api调用以获取用户详细信息。现在我的问题是，如何从另一个组件重新呈现此组件，以便在用户登录时，他可以在此标头组件中看到他的名字？如果我的问题不明确，请告诉我是否需要提供更多代码。感谢

Answer 1

考虑到这是一个小应用程序，此解决方案将起作用。但是当应用程序不是一个小应用程序时，它不应该被使用，因为它会使代码变得复杂。

因此，根据您提供的信息，层次结构如下：

<Header>
    <SignIn>
        <SignInContent/>
    </SignIn>
</Header>

，其中SignInContent组件正在调用api。我们将在Header中定义一个函数，并将其作为props传递给SignIn组件

export class Header extends React.Component<HeaderProps, HeaderState> { 
    constructor(){
       this.state = { isLoggedIn: false }; //Add this to existing state variables
    }
    render() {
        return {
            <SignIn setIsLoggedInTrue={this.setIsLoggedInTrue.bind(this)} />
        }
    }
    componentDidUpdate(prevProps, prevState) {
        if(this.state.isLoggedIn && !prevState.isLoggedIn) {
            // Make the api call for fetching user details
        }
    }
    setIsLoggedInTrue() {
       this.setState({isLoggedIn: true});
    }
}

在SignIn组件中，再次在render方法中将props传递给SignInContent，如下所示： <SignInContent setIsLoggedInTrue={this.props.setIsLoggedInTrue} /> 登录后，您可以从SignInContent组件中调用this.props.setIsLoggedInTrue函数。这应该可以解决你的目的

Answer 2

如果提供的道具已更改，则将重新呈现您的组件。

通过查看代码，this.props.children的值应该更改，最终会触发重新呈现组件

此外，如果您想知道如何在登录时触发它。应该有一个componentWillReceiveProps方法来检查用户的登录状态，如果发现登录将更新传递给组件的值：）

修改

这是您的问题的示例代码。由于使用了this.props.children。你需要像这样使用它。

render() { return ( <Layout> {this.state.userName} </Layout> );}

现在调用api并设置userName

如何在reactjs中重新呈现静态组件

2 个答案: