Question

我最近一直在努力学习React，试图理解如何正确控制可以由几个不同的东西显示的有条件渲染的元素（如对话框）。例如，项目列表可以各自具有其自己的模态内容但仍然共享相同的模态。我只是在不需要时隐藏模态（display: none）并在需要时更改显示。

当我需要在每次显示时重新初始化模态时，问题就出现了。比方说，例如，模态包含一系列选项卡，当前选项卡索引存储在模态状态中。在关闭并重新打开模态时，我希望当前的选项卡索引将重置为零，但事实并非如此;而不是隐藏模态之前留下的任何东西。

这个相当明显的原因是模态只是在最初渲染时一次。后续渲染更新不会重新运行安装生命周期方法。显然，解决方案必须包括在需要时重新安装组件（通常再次显示）。

我已经提出了一个可能的示例 - Dialog应该卸载并在isDialogShown更改时重新安装。我相当肯定React能够注意到这一点并在isDialogShown标志发生变化时正确运行生命周期方法。

...
const ParentElement = ({ isElementShown }) => {
  return (
    {!Boolean(isElementShown) 
      ? null
      : <ConditionalElement prop={stuff} />
    }
  );
}
...

CodePen Example - Conditional Rendering

但是，我不确定这是否是最好的方法。我希望有一种方法可以将属性传递给ConditionalElement本身，这会导致它重新渲染。如果属性是某个值，可能会从null函数返回render()？问题是我不认为这会重置ConditionalElement本身，但可能会重置所有孩子。

const ParentElement = ({ isElementShown }) => {
  return (
      <ConditionalWrapper isShown={true}>
        <ConditionalElement />
      <ConditionalWrapper/>
    }
  );
}

const ConditionalWrapper = ({ children, isShown }) = {
  // Don't render any children if the element should be hidden
  // Also, styles would be applied to hide the wrapper if necessary
  if (!isShown) {
    return null;
  }

  // Render the children if not hidden
  return children;
};

第二种方式似乎少了一点＆＃34; hacky＆＃34;但也有点嵌套。无论如何都会推荐吗？好消息是两种方式都可以切换＆＃34;切换＆＃34;元素（取消/重新安装）和＆＃34;隐藏＆＃34;它（display: none;）是否应该保留当地的州。这只需要另一个参数（isToggled和isShown）。

Answer 1

你的第二种方法是好的IMO，但是，如果你不喜欢嵌套的结果，你可以创建一个更高阶的组件（HOC）来增强组件的行为，增强的组件像原作一样工作，只要它知道，比如说，应该是一个＆＃39; shouldRender＆＃39;将底层组件切换为null的属性。

const toTogglable = (Elem) => (props) =>
  props.shouldRender ? <Elem {...props}/> : null;

const TogglableA = toTogglable(A);
// Then you can use it like
// <TogglableA shouldRender={true} {...otherProps} />

这种方法的另一个优点是你可以免费获得组合，比如你想通过一个属性来概括show / hide的行为＆＃39; shouldHide＆＃39;，你可以创建另一个HOC，然后只是组合它们为了增强您的组件，结果始终是一个扁平组件。

根据您的实例查看http://codepen.io/anon/pen/MmzpdG的工作示例。

React中的条件呈现导致切换时重新安装

1 个答案: