前言
接上文,近期 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 ~