React参数传递问题
问题描述
<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 } 的方式来定义函数参数，以保证代码的清晰度和可读性。
原文地址：https://blog.csdn.net/weixin_63681863/article/details/137941191
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！