Question

我有两条有两个组成部分的路线。

主页
设置

主页我无法控制代码，我无法修改它。我只能编写设置代码。

现在，一旦用户保存设置，应用程序就会重定向到主页。在这里，我想显示保存设置的成功消息。也可以创建成功消息组件，但是这里如果保存了设置，我需要一种同时呈现主页组件和成功消息组件的方法。成功消息将在20秒后卸载。

由于我无法修改主页，因此我无法在此处显示任何条件以显示消息或在从设置路由回主页时将任何内容作为参数传递。

任何建议都会有所帮助。

Answer 1

将成功消息存储在Redux等状态管理容器中。在主页中，使用componentWillReceiveProps设置本地状态，如下所示。

componentWillReceiveProps(nextProps) {
  if (nextProps.settingsMessage !== this.props.settingsMessage) {
    setTimeout(() => {
      this.setState({ settingsMessage: '' });
    }, 20000);
    this.setState({ settingsMessage: nextProps.settingsMessage });
  }
}

在Home组件中显示settingsMessage。

{this.state.settingsMessage && (
  <div>{this.state.settingsMessage}</div>
)}

Answer 2

我在这里看到两种可能的方式。

首先，您可以将主页用作背景，然后重定向。你可以使用setTimeout来渲染这样的东西几秒钟：

<div>
    <homepage/>
    <successMsg/>
</div>

然后重定向到主页。我知道这是一种非常奇怪的做事方式，但你真的无法控制你不拥有的组件，这就是反应的目的。

另一种方法是使用root容器（如果您有权限）。有些程序员会在根容器中使用一些组件来处理通常情况下看不见的通知，消息或弹出窗口等内容。如果你有这个，你可以设置redux或flux来重定向后触发你的消息。或者，如果您根本不使用redux或flux，则可以简单地使用事件发射器。

Answer 3

据我所知，这不是那么直接的方式，我需要一个解决方法。

在我将路由更改为settings之前的homepage组件中，我使用原生的javascript方式向正文添加成功消息，持续5秒。

这不是React方式，而是一种解决方法，一旦Homepage代码可用，我就可以相应地更新代码。或者我们在homepage中有一个方法，它将显示成功消息，具体取决于路由功能中传递的参数。通过这种方式，所有其他页面也可以向homepage提供自己的消息，homepage将首先检查并发送消息。

感谢所有人的支持。

在React中单个路由上渲染多个组件

3 个答案: