ReactJS 和 MDL 菜单未显示答案

【问题标题】：ReactJS and MDL menu not showingReactJS 和 MDL 菜单未显示
【发布时间】：2016-06-26 13:13:00
【问题描述】：

尝试制作一个使用 Material Design Lite 的应用。但是，我遇到了 MDL 菜单无法打开的问题。

我也尝试过关注this article，它描述了 React 和 MDL 不能很好地配合，需要调用 componentHandler 来升级元素。但是在这个笔中组件不是动态加载的，所以它们应该是自动更新的。

期待听到您的回答，谢谢！

【问题讨论】：

React 和 MDL 不能很好地发挥作用实际上有几个原因。您遇到的问题是 React 会将所有事件委托给文档正文，并且出于兼容性原因，它将使用 SyntheticEvent 代替浏览器的本机事件 (more info here)。简而言之，当在您的组件上触发事件时，您的组件将是最后一个听到它的，因此升级后的 MDL 组件不会接收到点击事件。我没有适合您的解决方案，但也许这些信息可以帮助您找到解决方案。

【解决方案1】：

使用 React 时需要使用 htmlFor 而不是 for。 Check it out.

<ul className="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
      for="demo-menu-lower-left">

应该是：

<ul className="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
      htmlFor="demo-menu-lower-left">

查看更新的笔here。

【讨论】：