Question

如何在React中实现此物化下拉功能？

   <a className='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

   <ul id='dropdown1' className='dropdown-content'>
      <li><a href="#!">one</a></li>
      <li><a href="#!">two</a></li>
      <li className="divider"></li>
      <li><a href="#!">three</a></li>
   </ul>

Materialize Dropdown documentation

我已经包含了materialize.js以便处理。我猜这与data-activates属性有关。我没有收到任何错误，但有没有其他方法来声明此属性以使其在React中工作？

Answer 1

尝试使用dataActivates。

 <a className='dropdown-button btn' href='#' dataActivates='dropdown1'>Drop Me!</a>

好的，我在react.docs发现了这个;

React支持所有data- *和aria- *属性以及以下列表中的每个属性。

注意：所有属性都是 camel-cased ，属性类和for分别是className和htmlFor，以匹配DOM API规范。有关事件列表，请参阅支持的事件。

Answer 2

$('.dropdown-button').dropdown({ 
                                inDuration: 300, 
                                outDuration: 225, 
                                constrain_width: true, 
                                hover: false, 
                                gutter: 0, 
                                belowOrigin: false 
                              });

Answer 3

旧帖子，但是我在使用带有React的materializecss时遇到了很多问题，并且花了太长时间试图找到变通方法。查看React Materialize，链接将转到其中包含的Dropdown Component。很棒的库，简化了一些事情，并修复了一些其他问题，例如带有一些元素的onClick处理程序。您也可以一起使用它们，只需在碰到路障时添加React Materialize Components。

Answer 4

$（＆＃39; .dropdown按钮＆＃39）。下拉（{ inDuration：300， outDuration：225， constrain_width：true，悬停：假，排水沟：0， belowOrigin：false } ）;

如何在React中实现Dropdown工作？

4 个答案: