如何在 React JS 中显示带边距的评论回复？

Question

我有一个comments具有四个值的对象：

data.js

export const comments = [

    { id: 1, content: 'comment 1', responseTo: 9, writer: 'Max' },

    { id: 2, content: 'comment 2', responseTo: 1, writer: 'John' },

    { id: 3, content: 'comment 2', responseTo: 1, writer: 'John' },

    { id: 4, content: 'comment 2', responseTo: 1, writer: 'John' },

    { id: 6, content: 'comment 3', responseTo: 10, writer: 'Karl' },

    { id: 7, content: 'comment 4', responseTo: 6, writer: 'Tina' },

    { id: 8, content: 'comment 4', responseTo: 6, writer: 'Tina' }

];

App.js

import { comments } from './data';

function App() {

    return (

        <div>

            {comments.map((each) => {

                return (

                        <Fragment>

                            <Comment each={each} />

                        </Fragment>

                    )

                );

            })}

        </div>

    );

}

如何在左边显示评论回复？

Answer 1

我可能会更改您的评论的存储方式。您可以将回复作为数组添加到评论中。通过这种方式，您也可以轻松设置评论和回复的样式。检查下面的片段。我创建了一个Comment组件，它检查是否是responseTo其他评论。如果是，它会添加一个额外的类。function Comment({ comment }) {&nbsp; return (&nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; key={comment.id}&nbsp; &nbsp; &nbsp; className={comment.responseTo ? "comment comment--reply" : "comment"}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <a href={`/user/${comment.writer}`}>{comment.writer}</a>&nbsp; &nbsp; &nbsp; <p>{comment.content}</p>&nbsp; &nbsp; &nbsp; {comment.responses &&&nbsp; &nbsp; &nbsp; &nbsp; comment.responses.map((reply) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Comment key={reply.id} comment={reply} />&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; );}function getThreadedComments(data) {&nbsp; const comments = [];&nbsp; for (let comment of data) {&nbsp; &nbsp; if (comment.responseTo) {&nbsp; &nbsp; &nbsp; const index = comments.findIndex((i) => i.id === comment.responseTo);&nbsp; &nbsp; &nbsp; comments[index].responses.push(comment);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; comments.push({ ...comment, responses: [] });&nbsp; &nbsp; }&nbsp; }&nbsp; return comments;}function App() {&nbsp; const data = [&nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; content: "comment 1",&nbsp; &nbsp; &nbsp; responseTo: null,&nbsp; &nbsp; &nbsp; writer: "Max"&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; content: "comment #2, in response to Max",&nbsp; &nbsp; &nbsp; responseTo: 1,&nbsp; &nbsp; &nbsp; writer: "John"&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; id: 3,&nbsp; &nbsp; &nbsp; content: "Max, that's great!",&nbsp; &nbsp; &nbsp; responseTo: 1,&nbsp; &nbsp; &nbsp; writer: "Peter"&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: 4,&nbsp; &nbsp; &nbsp; content: "Okay, it's really impressive ;)",&nbsp; &nbsp; &nbsp; responseTo: 1,&nbsp; &nbsp; &nbsp; writer: "Vic"&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; id: 5,&nbsp; &nbsp; &nbsp; content: "Great content!",&nbsp; &nbsp; &nbsp; responseTo: null,&nbsp; &nbsp; &nbsp; writer: "Lilly"&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: 6,&nbsp; &nbsp; &nbsp; content: "comment 3",&nbsp; &nbsp; &nbsp; responseTo: null,&nbsp; &nbsp; &nbsp; writer: "Karl"&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; id: 7,&nbsp; &nbsp; &nbsp; content: "Oi, Karl! This is comment 7",&nbsp; &nbsp; &nbsp; responseTo: 6,&nbsp; &nbsp; &nbsp; writer: "Tina"&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; id: 8,&nbsp; &nbsp; &nbsp; content: "@Karl, just do not...",&nbsp; &nbsp; &nbsp; responseTo: 6,&nbsp; &nbsp; &nbsp; writer: "Chris"&nbsp; &nbsp; }&nbsp; ];&nbsp; const comments = getThreadedComments(data);&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <h2>Comments</h2>&nbsp; &nbsp; &nbsp; {comments.map((comment) => (&nbsp; &nbsp; &nbsp; &nbsp; <Comment key={comment.id} comment={comment} />&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; );}ReactDOM.render(<App />, document.getElementById('root'));body {&nbsp; color: #353635;&nbsp; font-family: sans-serif;&nbsp; line-height: 1.5;}a {&nbsp; color: #1979c9;&nbsp; text-decoration: none;}.comment {&nbsp; border-left: 4px solid rgba(0, 0, 0, 0.1);&nbsp; margin-bottom: 1rem;&nbsp; padding: 0.5rem 1rem;}.comment--reply {&nbsp; margin-left: 0.5rem;}<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>