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

【问题标题】：Render Multiple Components on Single Routing in React在 React 中的单个路由上渲染多个组件
【发布时间】：2018-01-14 08:03:05
【问题描述】：

我有两条包含两个组件的路线。

主页
设置

主页我对代码没有任何控制权，我无法修改它。我只能写设置代码。

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

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

任何建议都会有所帮助。

【问题讨论】：

能否将 Homepage 组件包装在一个新组件中并显示出来？ <WrapperComponent><Message /><Homepage /></WrapperComponent>-ish
是的，我和 Henrik 的想法一样。并且一旦设置成功保存，在底部显示成功消息组件，并带有指向主页组件的链接，以便用户可以重定向到主页。
你有访问根组件的权限吗？
@Tyan Hau Chiau：我无权访问根组件

标签： reactjs redux react-redux

【解决方案1】：

将成功消息存储在像 Redux 这样的状态管理容器中。在主页中，使用组件WillReceiveProps 设置本地状态，如下所示。

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

【讨论】：

我认为这是最好的，但是我无权更新 Home 组件，因为它已经上线并且目前无法进行开发/更改。

【解决方案2】：

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

第一种方式，您可以将主页用作背景，然后重定向。你可以 setTimeout 来渲染这样的东西几秒钟：

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

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

另一种方法是使用根容器（如果您有访问权限）。一些程序员会在根容器中放置一些组件，用于在正常情况下不可见的通知、消息或弹出框等内容。如果你确实有，你可以设置 redux 或 Flux 在重定向后触发你的消息。或者，如果您根本不使用 redux 或 Flux，则可以简单地使用事件发射器。

【讨论】：

我会尝试你的第一个建议，我认为它应该可以解决我的问题。
@Sudarshan 是的，我认为你应该没问题，只要主页不是太大，但我强烈建议与你持有主页的同事交谈:)
@Tyan Hau Chiau 谢谢:)

【解决方案3】：

据我了解，这不是那么直截了当，我需要解决这个问题。

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

这不是 React 方式，而是一种解决方法，一旦Homepage 代码可用，我可以相应地更新代码。或者我们将在homepage 中有一个方法，该方法将根据路由函数中传递的参数显示成功消息。这样，所有其他页面也可以向homepage 提供自己的消息，homepage 将首先检查并呈现消息。

感谢大家的支持。

【讨论】：