在 React 中实现没有显示答案

【问题标题】：Materialize in React not showing在 React 中实现没有显示
【发布时间】：2017-03-16 02:16:47
【问题描述】：

我在 react 中实现 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>
    );

我有什么明显的遗漏吗？

谢谢！

【问题讨论】：

标签： reactjs materialize

【解决方案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>
        )
    }
}

【讨论】：

【解决方案2】：

您需要使用 react-materialize 才能使用 Materialize 的 javascript 组件。 https://github.com/react-materialize/react-materialize

【讨论】：