React中为何单个button标签渲染出两个复用旧样式的同样式按钮？

问题原因说明 #

1. 单个button标签渲染出2个按钮的原因 #

你编写的<button>Delete</button>是放在props.contacts.map()的回调返回逻辑中，map方法会遍历传入的contacts数组的每一项，每遍历1条数据就会执行一次回调，返回一段包含该按钮的DOM结构。你当前传入的contacts数组共有2条联系人数据，因此会生成2组联系人卡片，每组都自带一个Delete按钮，最终渲染为2个按钮。

优化提示：React中遍历渲染列表元素时，需要给遍历生成的最外层元素添加唯一的key属性，否则控制台会抛出警告，可修改map逻辑如下：

const renderContactList = props.contacts.map(contact=>{
     return(
         {/* 新增唯一key属性 */}
         <div className="item" key={contact.id}>
             <div className="content">
                 <div>
                 <div className="name">{contact.name}</div>
                 </div>
                 <div>
                 <div className="mail">{contact.email}</div>
                 <button>Delete</button>
                 </div>
             </div>
         </div>
     );
});

2. 按钮样式和此前带prop组件样式一致的原因 #

React中直接导入的.css文件默认是全局生效的，只要你之前编写的按钮样式使用了通用的标签选择器（比如直接写button { 样式规则 }）、或者样式选择器能匹配到当前的button元素，不管在哪个组件内的button都会命中该样式规则，因此样式会和你之前的实现保持一致。
如果需要实现组件样式隔离，可以使用CSS Modules、CSS-in-JS方案、或者给组件外层添加唯一类名限制样式的作用范围。

内容的提问来源于stack exchange，提问作者rEActor