当前位置：首页 > news >正文

React 列表渲染列表排序条件渲染数据渲染响应式处理

news 2025/9/20 6:58:48

数据结构

const list =[{commentId: 1, // 评论唯一标识（用于删除/修改等操作）userName: "小橙子", // 用户名称commentContent: "这个产品真的超好用！已经回购第三次了，推荐给身边好多朋友～", // 评论内容likeCount: 28, // 点赞数量isShow: true // 是否显示（true：显示，false：隐藏/审核中）},{commentId: 2,userName: "风里的海",commentContent: "整体体验还不错，但有个小问题：续航时间比介绍的短了大概1小时，希望后续能优化～",likeCount: 15,isShow: true},{commentId: 3,userName: "星空漫游者",commentContent: "第一次用这类产品，操作很简单，客服回复也很及时，给个好评！",likeCount: 9,isShow: false}
]

普通渲染

function App() {const [commentList,setCommentList] = useState(list)return (<div >{commentList.map(item=>{return  <p key={item.commentId}>{ item.commentContent}</p>                        })}</div>);
}

条件渲染

isShow=true为显示

function App() {const [commentList, setCommentList] = useState(list)return <div>{commentList.map(item => {return (item.isShow && (<div key={item.commentId}>{item.commentContent}{item.commentId === 1 && <button>删除</button>}</div>));})}</div>
}

列表传参

function App() {const [commentList, setCommentList] = useState(list)//删除评论const deleteComment=(id)=>{const list =commentList.filter(item => item.commentId !== id)setCommentList(list)}return <div>{commentList.map(item => {return (item.isShow && (<div key={item.commentId}>{item.commentContent}{item.commentId === 1 && <button onClick={()=>deleteComment(item.commentId)}>删除</button>}</div>));})}</div>}