[例]リカバリステータスとPropsについて
反応基礎課2日目
react基礎授業が始まってから2日が経ちました。初めてのんびりした2週間と違って、昨日たまった宿題の目録を毎日復習して、翌日の勉強の授業の予習を遅く始めました。出勤時に感じなかった追いかけられた感じ...大学受験の間も感じなかった恐怖だった。彼のおかげで、人生で椅子に座るのが一番長い時間を過ごしました。そして、今日も早めに明日のレッスンを文字で書いてブログを開いて頭の中に入れたいと思いました。果たして私は今このブログを终えてどれだけのstateとpropsを理解することができますか..。これは疑問です。
React State & Props
Stateは可変値で、構成部品内部に作成されます。逆にpropsは外部からパラメータなどに渡される値であり,最初から決定される値である.人を主体として、名前や性別はpropsであり、住む場所、年齢、職場などは変えられる価値状態です。
Stateの例
次の図は、+または-ボタンを押すとカウントされる構成部品を示しています。この構成部品の内部に存在するstateはカウントされた数字とみなされます。
Props特性
構成部品のプロパティを表します。
外部不変(親/親構成部品)から渡される値(関数のパラメータなど)
オブジェクトとして存在します。
これは変更されない値なので、読み取り専用と理解できます。
Props動作原理
次のコードを見て、自分の理解を整理しました。
functionParent(){->「Parent」親要素
return (
<div className="parent"> {
<h1>I'm the parent</h1>
<Child text={"こんにちは"}/>->propsの値を属性として定義
</div>属性はtext={「こんにちは」}
);
};
function Child(props){->の上に、ここのpropsパラメータに属性をChild素子の値に書き込む
(オブジェクトシェイプ(キー:値)を返します。
<div className="child">
<p>{props.text}</p>->のため、pタグの値はJavaScriptで
</div>は、ロードされたオブジェクトの値と同じようにロードできます。
); {props.text}
};
じょうたいうんどうのげんり
次のコードを見て、自分の理解を整理しました。
import { useState } from "react"; -> まずimportを読み込み、usState関数を使用します。
function CheckboxExample(){->userStateを呼び出すと、タイル形式が返されます。
したがって、isCheckedはusStateの配列0である
const [isChecked, setIsChecked] = useState(false); setisCheckedは配列1です。
isCheckedは現在の状態変数setisCheckedを表します
現在の変数の関数を更新できます。最後に
userStateのパラメータ値は状態の初期値です。
const handleChecked=(イベント)=>{->イベントハンドラ関数を宣言します。
setIsChecked(event.target.checked); -> Handler関数を呼び出すと、次のsetisChecked関数(状態変換関数)
}; 現在のステータス値ischecked変数が呼び出され更新されます
return(setIsCheckedカッコ内でこの関数のパラメータ値が必要)
<div className="App">
<input type="checkbox" checked={isChecked} onChange={handleChecked} />
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
</div>->ischeckedは、最初はtrue値とfalse値を持つため、3つの演算子を使用できます。
); -> 上のinput typeプロパティのチェックボックスで変更が発生した場合、
}には、Handler関数の呼び出しがリストされています。
Reference
この問題について([例]リカバリステータスとPropsについて), 我々は、より多くの情報をここで見つけました https://velog.io/@dream6414/예습-React-State-Props-이해テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol