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

Question

我不明白为什么下面的代码不会为我创建基础菜单。下面是我的代码的 super 简化版本:

        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 设置没有问题，我在“正常”html 中测试了它并在菜单上运行 $().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(){
    ....
    ....
  }
})

希望这对您有所帮助。