react修改页面dom

react修改页面dom的两种办法

一：使用选择器：

1、引入react-dom

    import ReactDom from 'react-dom'

2、给react节点设置id或类名等标识

    <span id='tip'></span>

3、定义变量保存dom元素

const span=document.getElementById('tip')

4、通过ReactDom的findDOMNode()方法修改dom的属性

ReactDom.findDOMNode(span).style.color='red'

点击时： e.currentTarget 获取到点击的dom,通过改变样式或者innerHtml改变dom

二：使用ref属性

1、给指定标签设置ref属性

    <span ref='tip'></span>

2、通过this.refs.ref属性值来修改标签的属性

    this.refs.tip.style.color = "red"

class组件

函数组件使用

应用场景 ：

效果图 如下所示：

问题 ：

解决 ：

:hover，:active等伪类无法满足需求。通过 *** 作ClassName的值，来控制列表的样式；设置一个变量 pre ，用于保存上一个蓝底的列表的id值（初始化为第一个）。

本文内容如下 ：

设置项目环境。由于是React项目，在全局环境中安装: create-react-app ，然后运行:

npx create-react-app my-app //创建一个my-app的项目

    在初始化时，着色；

    在点击事件触发时，去掉上一个颜色，并对当前列表着色。

注：不懂或不足之处请留言。

---