reactjs中如何重新渲染静态组件

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>;
}
}

这是我使用头组件的唯一文件，因此我不必在我创建的每个组件中都使用它。标头组件的 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