当前位置: 首页 > 面试题库 >

如何创建带有过渡的React Modal(追加到``)?

厍建义
2023-03-14
问题内容

这个答案有一个模态https://stackoverflow.com/a/26789089/883571,它通过将附加到来创建基于React的模态<body>。但是,我发现它与React提供的过渡插件不兼容。

如何创建一个带有过渡的(进入和离开期间)?


问题答案:

在2015年的React Conf上,Ryan Florence
使用门户进行了演示。这是创建简单Portal组件的方法…

var Portal = React.createClass({
  render: () => null,
  portalElement: null,
  componentDidMount() {
    var p = this.props.portalId && document.getElementById(this.props.portalId);
    if (!p) {
      var p = document.createElement('div');
      p.id = this.props.portalId;
      document.body.appendChild(p);
    }
    this.portalElement = p;
    this.componentDidUpdate();
  },
  componentWillUnmount() {
    document.body.removeChild(this.portalElement);
  },
  componentDidUpdate() {
    React.render(<div {...this.props}>{this.props.children}</div>, this.portalElement);
  }
});

然后您通常可以在React中完成的所有操作都可以在门户内部进行…

    <Portal className="DialogGroup">
       <ReactCSSTransitionGroup transitionName="Dialog-anim">
         { activeDialog === 1 && 
            <div key="0" className="Dialog">
              This is an animated dialog
            </div> }
       </ReactCSSTransitionGroup>
    </Portal>

您也可以看看Ryan的react-modal,尽管我实际上没有使用它,所以我不知道它在动画中的效果如何。



 类似资料:
  • 问题内容: 在我的应用程序中,我想用JTable的行创建过渡效果。例如,当鼠标进入该行时,该行的背景颜色将改变;相反,当鼠标退出该行时,该行的颜色将恢复正常。 我怎样才能做到这一点? 问题答案: 使用下面的代码,这将为您提供关于对JTable的行应用翻转效果的想法。

  • 我有一本空字典。名称:它将具有值为列表的键。 从一个单独的迭代中,我获得一个键(例如:)和一个项(一个元组),以放置在的值列表中。 如果此键已存在,我想附加此项。如果这个键不存在,我想用一个空列表创建它,然后附加到它,或者只是用一个元组创建它。 将来,当这个键再次出现时,由于它存在,我希望再次追加该值。 我的代码包括: 获取密钥和值。 查看中是否存在非密钥。 如果不创建: 之后: 这是做这件事的方

  • 问题内容: 我在div页上: 并在jQuery中: 这为我产生了: 我想在表中收到此信息: 我在做: 但这为我产生了: 为什么?我怎样才能正确地做到这一点? 问题答案: 这行: 附加到不是新的。 有几种方法: 但是,通过上述方法,添加样式和动态地进行处理变得不那么容易管理。 但是,如何做到这一点,却几乎可以实现您的期望: 希望这会有所帮助。

  • 类似地,我们如何在log4j2中创建自定义的appender,因为我们没有AppenderSkelton类要扩展,而所有其他appender都扩展AppenderBase类。

  • 我在HTML正文中有一个名为RecipeContainer的div。我正在尝试使用一个API来根据用户的关键字搜索菜谱。最初,我在一个HTML中有6个DIV,它们被填充在我的javascript中,并使用CSS样式,但我认为这不再是一个有效的解决方案。 下面是我当前的代码,它试图将功能转移到完全在JS中创建的每个菜谱的平铺中: 这是每当用户点击Submit时执行的循环。实际上,我有两个问题与此相关

  • 我知道pandas的设计目的是加载完全填充的,但我需要创建一个空的DataFrame,然后逐个添加行。做这件事最好的方法是什么? 我成功创建了一个空DataFrame,其中包含: 然后我可以添加一个新行,并用以下内容填充字段: 它可以工作,但看起来很奇怪:-/(它不能添加字符串值) 我如何添加一个新的行到我的数据帧(不同的列类型)?