TIL 15日目-リカバリベース

6224 ワード

React TIL テキストリンク

🍏 Achievement Goals 🍏

🍒 React State & Props

stateは、propsの概念を理解し、実際のプロジェクトに正しく応用することができます.state:内部変化の値.props:外部から伝達された価格.
propsの特徴は、親(親)コンポーネントから渡される値、オブジェクト形状、読み取り専用(read-only)です.

応答関数要素では、ステータスフックを使用してステータスを定義および変更できます.const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);まず、上記のフォーマットを使用するstate変数を宣言します.

const [isChecked, setIsChecked] = useState(false);

その後、イベントを処理する関数にステータスが更新されます.


const handleChecked = (event) => {
    setIsChecked(event.target.checked);
}

最後に、使用する関数をinputのプロパティとします.

<input type="checkbox" checked={isChecked} onChange={handleChecked} />

支柱は

応答コンポーネントに伝達され得る.

サブコンポーネントに渡す値とプロパティを整理します.

propsを使用して、定義された値と属性を渡します.

で伝達されたアイテムをレンダリングします.

ex)


<Child text={'Hello World!'} /> // 1.
function Child(props) = {	// 2.
    return (
    	<div className='child'>
	    <p>{props.text}</p> // 3.
	</div>
    );
};

上のコードは、次のようにtag間に値を書き込むことができます.


<Child>Hello World!</Child> // 1.
function Child(props) = {	// 2.
    return (
    	<div className='child'>
	    <p>{props.children}</p> // 3.
	</div>
    );
};