コメントウィンドウにコメントを書きたいなら

概要

機能を実現するには、反応器からプロジェクトファイルを転送する必要があります.
バニラJavaScriptより便利です.
初心者から見れば、コードの省略はかえって混乱している.
以前にクエリー・セレクタを使用して正確に名前を付けることができた場合は、このプロセスは反応器で省略されます.
直接説明すると、かえって可読性が悪い.
つまり、構成部品管理自体が
便利ですが、propsやuseStateを正しく理解できれば簡単です.

ロジッククリーンアップ

コメントを書くために考えた論理を整理しましょう
記事を配置するスペースを取得し、入力値を検出し、Submitイベントが発生するたびに
アイラインを描いてくれればいいのに?
これを実現するには、input valueを検出してデータをインポートします.
元素として投げ出す方法が必要です
コメントはいろいろあるかもしれないので、順番に管理したほうがいいです.
また,所望の値を得るためには,それをオブジェクト化してキー値でアクセスすれば論理を最小化できる.
もちろん、これは容易ではありません.
配列にオブジェクトブロックを追加するたびに
useStateの影響で、情報のレンダリングと更新を続行します.
コメントを削除する機能は、ここでフィルタとして選択したオブジェクトを含まない場合があります.
レイアウトに戻し、usStateで再レンダリングすればいいです.

エンコーディング

プライマリ構成部品上の関数

  const [comments, setComments] = useState([]);
  const [inputValue, setInputValue] = useState("");

  function addComment(e) {
    e.preventDefault();
    setComments([
      ...comments,
      { id: e.target.id, name: "석영", text: inputValue },
    ]);
    setInputValue("");
  }

  function inputChange(e) {
    setInputValue(e.target.value);
  }

ホームページから受け取ったpropsを元に展開されたコミュニティ素子です.

import React from "react";
import Comment from "../comment/Comment";

function Comments({ commentsList }) {
  return (
    <ul className="commentPostList">
      {commentsList.map((item, id) => (
        <Comment key={id} comment={item} />
      ))}
    </ul>
  );
}

export default Comments;

最下位のコンポーネントはCommentで、コメントに存在するコメントオブジェクトを1つずつ展開してコンポーネントに配置します.

import React from "react";

function Comment({ comment }) {
  return (
    <li className="commentPost" key={comment.id}>
      <span>{comment.name}</span>
      <div>{comment.text}</div>
      <i className="fa-solid fa-xmark deleteBtn" />
    </li>
  );
}

export default Comment;

結果

コメントは見られますが
何もない時に入力する現象も見られます.
条件文で障害者をアクティブにするかどうか
空の文字列が入力を受け入れない関数を構成するかどうかは考慮する必要があるようです.

せいちょうてん

次の図はpropsがどのような形で伝達されるかを示しています.
オブジェクトとして投げ出すたびにmainコンポーネントにコメントとして渡される場合
変数名はkey、値はstateで指定した配列です.
今はまだ分かりません.
どのように体現するかは理論的な学習が必要らしい.

機能を実現するのに丸1日以上かかりました.
シンプルに見える機能ですが、私には高度化された技術です.
周りの同い年の人を見れば見るほど扱いやすくなりますが、心が焦ります.
基本的な知識がなくて理解するのはかえって逆効果だ.
基本的な知識を永遠に覚えることが大切です.