问题描述
<div className="reply-list">{/* 评论项 */}{list.map((item) => {console.log("map 里面的item", item);return <CommentItem item={item} />; // 调用组件并传递参数item})}</div>
// 在组件中使用形参
function CommentItem(item) { // 这种写法 就出错function CommentItem({ item }) { // 这种写法就对 为什么????
解答
在 React 中,组件的 props 可以通过对象解构的方式来传递。因此,当你使用 { item }
的方式来定义函数参数时,实际上是在从 props 对象中解构出 item
属性。这种写法通常更为常见和推荐,因为它能够明确地指示组件需要哪些 props,并且提供了更好的代码可读性和维护性。
而当你使用 CommentItem(item)
这种方式时,实际上将整个 props 对象作为参数传递给了 CommentItem
函数。这样做虽然也可以正常工作,但是在函数内部需要手动从参数中提取 item
属性,相对来说不够清晰。
因此,推荐使用 { item }
的方式来定义函数参数,以保证代码的清晰度和可读性。