Question

我正在实施Materialize模式，但它没有显示任何内容。我将模态分为组件和在父容器中调用模态的按钮。

这是我的代码：

Parent.js：

return (
      <div>
        <div>
          <HelpForm />
        </div>
        <div className="container">
          <ul className="collection">
            {items.map(item =>
              <a refs="modalTrigger" className="modal-trigger"
                key={item.id}
                data-target="#modal1">
                <HelpFeedItem key={item.id} item={item} />
              </a>
            )}
          </ul>
         <HelpFeedModal />
        </div>
      </div>
    );

Modal.js

render() {
    return (
      <div id="modal1" className="modal modal-fixed-footer">
        <div className="modal-content">
          <h4>Modal Header</h4>
          <p>A bunch of text</p>
        </div>
        <div className="modal-footer">
          <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
        </div>
      </div>
    );

有什么明显的东西让我失踪吗？

谢谢！

Answer 1

我通过在项目中包含jQuery然后在组件的顶部添加建议的jQuery代码来实现这一点。

的index.html：

<html>
    <body>
        //Any other html
        <script src="jquery cdn of your choice"></script>
    </body>
</html>

ModalComponent.js：

class Modal extends Component {
    render() {

        //You must use window.$ or $ will be undefined
        window.$(document).ready(function() {
            window.$('.modal').modal();
        });

        return (
            <div>
                //this is the trigger
                <a class="waves-effect waves-light btn" href="#modal1">Modal</a>

                //this is the modal
                <div id='modal1' className='modal'>
                    <div className='modal-content'>
                        <h4>Modal Header</h4>
                        <p>Text in the modal body</p>
                    </div>
                 </div>
            </div>
        )
    }
}

Answer 2

您需要使用react-materialize才能使用Materialise的javascript组件。 Sayed's

在React中实现不显示

2 个答案: