jjzjj

javascript - material-ui 中的 <Fade> 只是禁用组件的可见性。如何获得淡入淡出效果并真正隐藏组件？

coder 2025-03-12 原文

我正在使用来自 material-ui 的 material-ui 组件.

<Fade in={!randomizeFlag}>
              <Grid>
                <FormControlLabel control={<Switch onChange={this.handleStartValueFlag} ></Switch>} label="Start Value"></FormControlLabel>
                <TextField  type="number" label="Starting Value" value={startValue} onChange={this.handleStartValueChange} />
              </Grid>
</Fade>

我想在组件淡出时完全隐藏元素 Grid 但它只会禁用组件的可见性并在 DOM 中占用相同的空间(看起来是空的)。我如何使元素在淡出后隐藏使用<Fade>

最佳答案 

<Fade in={!randomizeFlag} unmountOnExit={true}>
  ...
</Fade>

http://reactcommunity.org/react-transition-group/transition#Transition-prop-unmountOnExit

默认情况下，子组件在达到“退出”状态后会保持挂载状态。如果您希望在组件退出后卸载它，请设置 unmountOnExit。

关于javascript - material-ui 中的 <Fade> 只是禁用组件的可见性。如何获得淡入淡出效果并真正隐藏组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52637818/

material-uijavascriptsectionunmountOnExitreactjs

有关javascript - material-ui 中的 <Fade> 只是禁用组件的可见性。如何获得淡入淡出效果并真正隐藏组件？的更多相关文章

  1. ruby - 即时确定方法的可见性 - 2

    我正在编写一个方法，它将在一个类中定义一个实例方法；类似于attr_accessor:classFoocustom_method(:foo)end我通过将custom_method函数添加到Module模块并使用define_method定义方法来实现它，效果很好。但我无法弄清楚如何考虑类(class)的可见性属性。例如，在下面的类中classFoocustom_method(:foo)privatecustom_method(:bar)end第一个生成的方法(foo)必须是公共(public)的，第二个(bar)必须是私有(private)的。我怎么做？或者，如何找到调用我的cust

  2. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby-on-rails - 我需要一个真正的 UNIX RoR 开发环境 - 2

    从一开始，我就是一个Windows高手。我从MS-DOS开始。我安装了Windows2.1以及此后的所有Windows。现在，我家里有10台不同的Windows机器在运行，从Windows7Ultimate到各种版本的WindowsServer。我还没有完成Windows8，也不想去那里。我在服务器和各种软件方面都有UNIX经验，但它并不是我的首选环境。但是，我想我正在转换。我试图假装使用Cygwin和MSYS在Windows下运行UNIX。我的目的是搭建一个开发环境。两者都让我失望了。我花了比开发更多的时间来解决一系列技术问题。这是NotAcceptable。到目前为止，我的Ruby

  5. ruby - 我可以从 Ruby 中的系统调用中获得连续输出吗？ - 2

    当您在Ruby脚本中使用系统调用时，您可以像这样获得该命令的输出:output=`ls`putsoutput这就是thisquestion是关于。但是有没有办法显示系统调用的连续输出？例如，如果您运行此安全复制命令，以通过SSH从服务器获取文件:scpuser@someserver:remoteFile/some/local/folder/...它显示随着下载进度的连续输出。但是这个:output=`scpuser@someserver:remoteFile/some/local/folder/`putsoutput...不捕获该输出。如何从我的Ruby脚本中显示正在进行的下载进度？

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. ruby -\b 在 Ruby 正则表达式中的真正含义是什么？ - 2

    我有一个文件，其中包含诸如“CanyonSt/27thWay”之类的短语，我正试图使用​​Ruby正则表达式将其转换为“CanyonStand27thWay”。我使用file=file.gsub(/(\b)\/(\b)/,"#{$1}and#{$2}")进行匹配，但我我对\b的真正含义以及为什么$1包含斜线之前的单词边界之前的所有字符以及为什么$2包含从下一个单词开始的单词边界之后的所有字符感到有点困惑。通常，我希望正则表达式括号中的任何内容都在$1和$2中，但我不确定单词边界周围的括号真正意味着什么，因为从单词字符到字符的转换之间确实没有任何内容一个空白字符。

  8. ruby-on-rails - my_object.save(false) 并没有真正跳过我的 Active Record 验证 - 2

    所以我一直在努力解决我一直遇到的这个错误，我终于找到了导致它的原因。我一直觉得，当我调用@my_model.save(false)我会跳过我的ActiveRecord验证。事实证明这是部分正确的。我的对象正在保存到数据库中DESPITE我的ActiveRecord验证。我的问题存在是因为我的一个验证在验证过程中修改了一个子模型(这是一个24小时位置的调度应用程序，因此当午餐被保存时，我对照他们保存的那天和第二天检查它们以及确保用户不是指“凌晨2点”表示要上夜类。我的问题是:有没有办法真正跳过我的验证并直接移动到数据库？这是正常的ActiveRecord行为还是我应该更深入地研究我的验证

  9. ruby - 如何获得随机的 0 和 1 数字 - 2

    所以基本上是为了好玩，我试图生成一列数字(7位数字只有0和1)我的代码很短:a=rand(0000000-1111111)b=220a1=rand(0000000-1111111)a2=rand(0000000-1111111)a3=rand(0000000-1111111)a4=rand(0000000-1111111)a5=rand(0000000-1111111)whileb!=0putsaputsa2putsa3putsa4putsa5end我的问题是，不是生成随机的0和1列，而是所有，而是使用了数字。 最佳答案 这是惯用的

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐