第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 React JS 中顯示帶邊距的評論回復(fù)?

如何在 React JS 中顯示帶邊距的評論回復(fù)?

慕蓋茨4494581 2023-06-15 17:31:09
我有一個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>? ? );}如何在左邊顯示評論回復(fù)?
查看完整描述

1 回答

?
海綿寶寶撒

TA貢獻(xiàn)1809條經(jīng)驗 獲得超8個贊

我可能會更改您的評論的存儲方式。您可以將回復(fù)作為數(shù)組添加到評論中。通過這種方式,您也可以輕松設(shè)置評論和回復(fù)的樣式。


檢查下面的片段。我創(chuàng)建了一個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>


查看完整回答
反對 回復(fù) 2023-06-15
  • 1 回答
  • 0 關(guān)注
  • 103 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號