react怎么通过组件修改入口div的样式

这是一道题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app" style="display: none"></div>
<!--//react怎么通过组件修改这个div的样式,比如修改他的display,不能操作dom-->
</body>
</html>

clipboard.png
下面是js

import React from 'react'
import {render} from 'react-dom'
class Application extends React.Component {
    render(){
        return (
            this.props.children
        )
    }
}
//下面不能修改
render(<Application><a>123</a></Application>, document.getElementById('app'));
阅读 4.9k
3 个回答

componentDidMount钩子中就可以使用普通的dom方法获得根元素啊,那时候不想怎么操作就怎么操作

换个思路呢?根元素就让它为纯粹的根元素,然后再react组件中的render里面操作最顶层的这个

其实你的问题是,为什么要让#app默认成隐藏的。。。

#app对于React来说他是最基本的一个container,所有的操作都应该是只操作#app里面的东西才对。所以为啥要把#app默认设置为隐藏的?把#app设置为隐藏,就跟你平时把body标签设置为display:none一样不伦不类

其实你可以挑出来不要纠结#app这个的隐藏显示,就让它默认为显示好了,然后通过@Uker评论里面的方法,控制#app内部最高等级的container的隐藏显示就好了,效果是一样的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题