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

Question

我有一个comments具有四个值的对象：data.jsexport 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.jsimport { comments } from './data';function App() {    return (        <div>            {comments.map((each) => {                return (                        <Fragment>                            <Comment each={each} />                        </Fragment>                    )                );            })}        </div>    );}如何在左边显示评论回复？

Answer 1

我可能会更改您的评论的存储方式。您可以将回复作为数组添加到评论中。通过这种方式，您也可以轻松设置评论和回复的样式。

检查下面的片段。我创建了一个Comment组件，它检查是否是responseTo其他评论。如果是，它会添加一个额外的类。

function Comment({ comment }) {

  return (

    <div

      key={comment.id}

      className={comment.responseTo ? "comment comment--reply" : "comment"}

    >

      <a href={`/user/${comment.writer}`}>{comment.writer}</a>

      <p>{comment.content}</p>

      {comment.responses &&

        comment.responses.map((reply) => (

          <Comment key={reply.id} comment={reply} />

        ))}

    </div>

  );

}

function getThreadedComments(data) {

  const comments = [];

  for (let comment of data) {

    if (comment.responseTo) {

      const index = comments.findIndex((i) => i.id === comment.responseTo);

      comments[index].responses.push(comment);

    } else {

      comments.push({ ...comment, responses: [] });

    }

  }

  return comments;

}

function App() {

  const data = [

    { 

      id: 1,

      content: "comment 1",

      responseTo: null,

      writer: "Max"

    },

    {

      id: 2,

      content: "comment #2, in response to Max",

      responseTo: 1,

      writer: "John"

    },

    { 

      id: 3,

      content: "Max, that's great!",

      responseTo: 1,

      writer: "Peter"

    },

    {

      id: 4,

      content: "Okay, it's really impressive ;)",

      responseTo: 1,

      writer: "Vic"

    },

    { 

      id: 5,

      content: "Great content!",

      responseTo: null,

      writer: "Lilly"

    },

    {

      id: 6,

      content: "comment 3",

      responseTo: null,

      writer: "Karl"

    },

    {

      id: 7,

      content: "Oi, Karl! This is comment 7",

      responseTo: 6,

      writer: "Tina"

    },

    { 

      id: 8,

      content: "@Karl, just do not...",

      responseTo: 6,

      writer: "Chris"

    }

  ];

  const comments = getThreadedComments(data);

  return (

    <div className="App">

      <h2>Comments</h2>

      {comments.map((comment) => (

        <Comment key={comment.id} comment={comment} />

      ))}

    </div>

  );

}

ReactDOM.render(<App />, document.getElementById('root'));

body {

  color: #353635;

  font-family: sans-serif;

  line-height: 1.5;

}

a {

  color: #1979c9;

  text-decoration: none;

}

.comment {

  border-left: 4px solid rgba(0, 0, 0, 0.1);

  margin-bottom: 1rem;

  padding: 0.5rem 1rem;

}

.comment--reply {

  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>