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

记录一下全部的过程。

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

create-react-app my-app

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

npm start/yarn start

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

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

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

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

图标来自于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]看看是什么

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

list[1].props.color='red'

还是报错

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

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

查看ionicons官网的例子：

于是在初始化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