用react脚手架写了一个无趣且无用demo

·  阅读 717
用react脚手架写了一个无趣且无用demo

记录一下全部的过程。

首先,初始化一个项目。如果没有安装脚手架先安装

create-react-app my-app
复制代码

然后可以进入该文件夹启动看能不能跑。

npm start/yarn start
复制代码

成功的话会弹出一个地址为http://localhost:3000 的网页,上面有一个不停旋转的react图标。

查看一下项目结构,主要是src目录下的,把不需要的东西都删除。

清理完成后,获得了一个自己初始化的react项目。项目结构如下:

image-20210618095354735.png

其实demo的效果很简单。通过按钮控制一排图标的颜色、动画展示:

image-20210618095744754.png

图标来自于ionicons,4.2版本,每个图标都是单独的组件。通过一些属性控制图标的大小、颜色、动画效果。

demo引入了四个组件,放在compoments下的IconList.js中,用一个无序列表进行展示。

先将四个组件放置在一个数组中:

let list = []
list.push(<图标1的组件名/>,<图标2的组件名/>...)
复制代码

然后将其展示在页面上

return(
<div>
	...
	<div className="list-box">
		<ul className="list">
			{list.map((_, i) => (
				<li key={i}>{list[i]}</li>
			))}
		</ul>
	</div>
</div>
)
复制代码

我尝试通过这样的方法修改图标的颜色

list[1].color='red'
复制代码

报错了

TypeError: Cannot add property color, object is not extensible
复制代码

打印出list[1]看看是什么

image-20210618101557402.png

原来color属性在props这个对象下,那么尝试

list[1].props.color='red'
复制代码

还是报错

TypeError: Cannot assign to read only property 'color' of object '#<Object>'
复制代码

props下的属性应该是只读的,不能通过上述的方法修改它。但是可以通过修改传入图标组件的值来修改这个属性。

查看ionicons官网的例子:

image-20210618102125764.png

于是在初始化list时,加上

const [color,setColor] = useState('#000000')
list.push(<图标1的组件名			
            color={color}/>,
          <图标2的组件名
            color={color}/>...)
复制代码

之后就可以通过

setColor('一个16进制的颜色值')
复制代码

来修改图标的颜色了。

同理,将剩下要实现的三个动画效果也用这种方法加上去。

[isRotate,setIsRotate] = useState(false),
[isShake,setIsShake] = useState(false),
[isBeat,setIsBeat] = useState(false) 
复制代码

需要一些操作触发这些属性值的改变,我在图标列表的上方列了五个按钮,并绑定了点击事件。

<button onClick={changeColor}>changeColor</button>
<button onClick={(){changeState('rotate')}}>rotate</button>
<button onClick={()=>{changeState('shake')}}>shake</button>
<button onClick={()=>{changeState('beat')}}>beat</button>
<button onClick={()=>{changeState('stop')}}>stop</button>
复制代码

changeColor函数会给color赋值一个新的16进制颜色字符串,changeState函数会根据传入的变量改变动画变量的布尔值。也就是说,当isRotate、isShake为false,isBeat为true时,图标会执行Beat动画。

当然别忘了在初始化数组时,也要绑定这些属性

list.push(<图标1的组件名
            color={color}
            rotate={isRotate}
            shake={isShake}
            beat={isBeat}/>,
          <图标2的组件名
            color={color}
            rotate={isRotate}
            shake={isShake}
            beat={isBeat}/>...)
复制代码

来看看最终效果:

动画.gif

分类:
前端
标签: