前语
接上文,近期 React
发布了新官网并且 Cursor
编辑器也来了。
那么,运用 React
官网井字棋游戏优化点向智能编辑器下需求会是什么成果呢(已完成示例的基础上)?
1、For the current move only, show “You are at move #…” instead of a button.
从需求到代码完成能够发现,jumpTo
办法被移除了,可是已完成用当前信息替换了 move
的按钮。
接下来,将报错提交,会被怎么处理呢?
Uncaught ReferenceError: jumpTo is not defined
直接将 jumpTo
替换为 setCurrentMove
,解决 bug
的才能还挺厉害的。
2、Rewrite Board to use two loops to make the squares instead of hardcoding them.
关键字 two loops
生成时运用了两个 for
循环,想着运用 map
来进行生成,下新需求,换成 map
的方法,代码看下图。
可是忽略了 key
的问题。
Warning: Each child in a list should have a unique “key” prop.
下需求修改,新增 key
如下:
3、Add a toggle button that lets you sort the moves in either ascending or descending order.
这个需求需要阐明按钮的位置,要不然做欠好,给它添加在 game-info
的位置,完成度挺高的。
4、When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
这个需求高亮下的时分说经过 style
来完成,代码会经过判断新增类名的方法来操控款式,没有运用行内款式的方法,感觉挺强的。
当没有人赢的时分,提示信息说是一个平局,很好地完成了。
5、Display the location for each move in the format (col, row) in the move history list.
展现每步棋子位置的需求完成有 bug
,位置取值有误,应该是需求描绘大将 move
和 col
、row
相关在一起的原因,可是解构写代码的方法还是很不错的。
Wrapping up
需求大体上完成度都挺高的,做的欠好也是需求下的欠好(多想想自己的问题),它真的好强,一种和 AI 进行结对编程的感觉。
同时,如果在空白文档上让它用 React
生成井字棋,完成的是 class
的写法,或许数据模型是旧的版别,当然也能够经过下需求让其修改为 function
的写法。
成天被下需求的我们,快去体会下需求的快乐吧,have fun ~