方法一:通过className添加类名的方式
当点击实现变色的时候,需要重新使用render函数进行渲染
<style>
.isActive {
background-color: red;
}
</style>
<body>
<div id="app">
</div>
<script type="text/babel">
let arr = [1, 2, 3, 4];
let num;
let fun = () => {
return arr.map((v, i) => {
return <h1 key={i} onClick={() => {
num = i;
console.log(num)
render()//这里需要使用render函数重新渲染
}} className={num == i ? "isActive" : ""}> {v}</h1 >;
})
}
let render = () => ReactDOM.render(fun(), document.getElementById("app"))
render()
</script>
方法二:通过style直接修改样式的方式
<div id="app">
</div>
<script type="text/babel">
let arr = [1, 2, 3, 4];
let num;
let fun = () => {
return arr.map((v, i) => {
return <h1 key={i} onClick={() => {
num = i;
render()//
}} style={{ backgroundColor: i == num ? "red" : "" }}> {v}</h1 >;
})
}
let render = () => ReactDOM.render(fun(), document.getElementById("app"))
render()
</script>