Lobos/react-ui

Modal组件在以class *** extends Component 开发React组件时使用问题

HSUCHING opened this issue · 2 comments

看了下作者源代码,有几个问题想问下.如果在下有说的不对的地方希望指出。

看了下Modal组件里面的这行代码:

const div = document.createElement('div')
document.body.appendChild(div)
const container = ReactDOM.render(<Container />, div)

@Lobos

我的理解作者应该是想做成做成单例,使用的时候就一直在这个Container里面做增加modal和删减Modal之用。*那么我的问题是:这行代码如果我在创建自己页面或者是组件时使用import Modal from '/Modal'时就会执行这段代码,明显这时页面的DOM不一定就位,那么浏览器就会有提示说这样写是有问题的。
当然强引是可以搞定的,不过如果作为组件去使用的话,我觉得应该用的优雅点好。请问下有什么方式是可以优雅的使用它的?

Lobos commented

呃,因为我们从来不在head里面引用js,而是在body里面引用,所以一直没有注意这个问题。
最简单的解决方式,也是比较推荐的方式是在body里面,html的最后面引入js,这样可以避免很多加载的问题。

<html>
<head>...</head>
<body>
  <div id="xxx"></div>
 ...
  <script src="xxxx"></script>
</body>
</html>

@Lobos 好的...谢谢~~因为在做正式项目的时候,想用node_module的方式引入你们的库试试,所以就会有这样的问题... 感谢您的回答,现在我改成闭包的方式走应该是可以了~:)