无法使基础菜单与 reactJS 一起使用

Question

我不明白为什么下面的代码不能为我创建基础菜单。下面是我的代码的超级简化版本：

        var MenuDisplay = React.createClass({

            render: function(){
                console.log("menu display render");
                var menu = (true)?
                <ul className="dropdown menu" data-dropdown-menu>
                            <li>
                                <a id="profile_name">Welcome
                                </a><ul className="menu">
                                    <li>profile</li>
                                    <li className="logout">logout</li>
                                </ul>
                            </li>
                        </ul>
                        : null;
                return(
        <div>
                    {menu}
                    <FoundationPlugin />
                    </div>
                )
            }
        });

        var FoundationPlugin = React.createClass({
            render: function(){
                //applying foundation() the whole document 
                $(document).foundation();
                return(
                    <div></div>
                );
            }
        });

        React.render(
            <MenuDisplay />,
            document.getElementById('myDiv')
        );

jsx或html设置没有问题，我在'normal'html和运行ning $()中测试过.foundation 在菜单上。它正确显示菜单
如果我在所有代码之后应用 .Foundation() 而不是在 FoundationPlugin 组件内部应用，上面的代码就可以工作。但是我必须这样做。原因是我首先从 RestApi 获取数据，这需要一些时间。如果我将 $().foundation() 放在外面，当它到达 $().Foundation() 时，我的组件仍未获取数据并且未呈现正确的 html 标记。只有在所有渲染完成后，我才需要运行 $().foundation。

Answer 1

React 组件有几个生命周期函数。如果您需要等待渲染完成，并且要更新实际的 DOM，那么 componentDidMount 就是您所需要的。

var MenuDisplay = React.createClass({
  componentDidMount: function(){
    // Do stuff that relies on your DOM being rendered here.
    // Usually anything related to external libs like jQuery etc.
  },
  render: function(){
    ....
    ....
  }
})

希望对您有所帮助。

无法使基础菜单与 reactJS 一起使用

cannot get Foundation menu to work with reactJS

html

javascript

zurb-foundation

reactjs