React Key 在非数组、队列场景下的应用

猜猜这段代码会发生什么事？

JavaScript

{!state.isEditing ? ( <button type="button" onClick={() => this.setState({isEditing: true})}>修改</button> ) : ( <button form="form-1" type="submit">确定</button> )}

以为仅仅是切换下按钮？

其实是会执行下面的流程

1. 当 isEditing 为 false 的时候，点击 button，
2. isEditing 变成了 true
3. 重新 render，在 virtualDOM 进行 diff 的时候，给 button 添加了 type=submit 以及 form='form-1'
4. #form-1 表单被意外的 submit 了

来个 DEMO 验证下