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设置没有任何问题，我在＆＃39; normal＆＃39;中进行了测试。 html并在菜单上运行$（）。基础。它正确显示菜单
如果我在所有代码之后应用了.ation（）而不是在FoundationPlugin组件中，则上面的代码可以正常工作。但是我必须这样做。原因是我首先从RestApi获取数据，而这需要一些时间。如果我把$（）。foundation（）放在外面，当它到达$（）。Foundation（）时，我的组件仍然没有获取数据并且没有呈现正确的html标记。我必须在所有渲染完成后运行$（）。基础。

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(){
    ....
    ....
  }
})

希望这有帮助。

无法使用Foundation菜单与reactJS一起使用

1 个答案: