代码之家 › 专栏 › 技术社区 › Prasaad Patil

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

asp.net-core-2.0 visual-studio-2017 typescript reactjs

Prasaad Patil · 技术社区 · 6 年前

我正在使用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>;
}
}

这是我使用头组件的唯一文件,因此我不必在创建的每个组件中都使用它。头组件的componentdidmount()将检查访问令牌并进行API调用以获取用户详细信息。现在我的问题是,如何从另一个组件重新呈现这个组件,这样当用户登录时,他可以在这个头组件中看到他的名字?如果我的问题不清楚,请告诉我是否需要提供更多的代码。谢谢

2 回复 | 直到 6 年前

Ishu Madan 6 年前

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

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

<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方法中将道具传递给signincontent,如下所示: <SignInContent setIsLoggedInTrue={this.props.setIsLoggedInTrue} /> 一旦登录,您可以拨打 this.props.setIsLoggedInTrue 来自signincontent组件的函数。这应该能解决你的目的

Aseem Upadhyay 6 年前

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

通过查看您的代码, this.props.children 应该更改,这将最终触发组件的重新呈现

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

编辑

这是解决您问题的示例代码。自从 这个。道具。孩子们 使用。你需要这样使用它。

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

现在调用API并设置 userName