import React, { useState } from 'react';
const CommentList = ({ comments, showAnswerInput }) => {
return (
<div style={
{ marginLeft: '20px' }}>
{comments.map((comment) => {
return (
<div key={comment.id}>
{comment.name}:{comment.content}
<button
onClick={() => {
showAnswerInput(comment.id);
}}
>
回复
</button>
{comment.children && (
<CommentList comments={comment.children} showAnswerInput={showAnswerInput} />
)}
</div>
);
})}
</div>
);
};
export default function Test() {
const [user, setUser] = useState('张三');
const [input, setInput] = useState();
const [isShow, setIsShow] = useState(false);
const [comme
React 实现无限层级评论功能
最新推荐文章于 2024-02-28 19:23:04 发布
本文探讨如何利用React.js来构建一个支持无限层级的评论系统。内容涉及到通过操作state,特别是comments数组,来实现评论的动态添加和展示。文章指出当前实现中存在直接修改数组而非使用setComments的问题,需要改进。
摘要由CSDN通过智能技术生成