[React] State, Props, Event

8078 ワード
React テキストリンク

State

  • 画面上の要素のUI情報
  • 素子の状態値
    • ステータス値をコンポーネントの要素に反映し、データを変更するたびにUIに効率的に表示できます.
    
import React, { useState } from 'react';

function State() {
	const [color, setColor] = useState('red');

	return (
      <div>
        <h1>Function Component | State</h1>
      </div>
  );
}

export defa
  • usState関数をインポートして使用します.
  • usState関数は、function State()と戻り文の間で記述されます.
  • usState関数でパラメータとしての値が初期値です.
  • const[first,second]←配列の最初の要素は状態値であり、2番目の要素は状態値を更新する関数である.
    • import React, { useState } from 'react';

function State() {
	const [color, setColor] = useState('red');
	
	return (
      <div>
        <h1 style={{ color: color }}>Function Component | State</h1>
	<button onClick={() => setColor('blue')}>Click</button>
      </div>
  );
}

export default State;
    <button>でonClickイベントが発生した場合、setColor関数は、colorというステータス値のデフォルト値「red」を「blue」に変更します.

    Props

  • 親要素の内部状態値を子要素に渡す機能を有する.
  • 素子の属性値
  • の親コンポーネントから渡されたデータを持つオブジェクト.
  • propsは、JavaScript値の大部分をサブコンポーネントに渡すことができる.
    客体です.
    • // Parent.js

import React, { useState } from 'react';
import Child from '../pages/Child/Child';

function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
	<Child titleColor={color} />
    </div>
  );


export default Parent;
    親コンポーネントParentにサブコンポーネント<Child />をインポートした後、表示する位置にタグ形式で記述する.サブエレメントのpropsを使用してtitleColor属性を生成し、親エレメントのstate{color}値を渡します.

    Propsオブジェクト

    // Child.js

import React from 'react';

function Child(props) {
	// console.log(props);

  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
    </div>
  );
}

export default Child;
    Child素子は親から伝達されたpropsをパラメータとして受け入れる.propsオブジェクトの特定のキー値はpropsデータを使用するために使用されます.titleColorと同じ形式で作成されます.

    Props & event


    propsによるイベントハンドラの転送

    // Parent.js

import React, { useState } from 'react';
import Child from '../pages/Child/Child';

function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
	<Child titleColor={color} changeColor={() => setColor('blue')} />
    </div>
  );


export default Parent;
    // Child.js

import React from 'react';

function Child(props) {
  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
	<button onClick={props.changeColor}>Click</button>
    </div>
  );
}

export default Child;
    <button> onClickイベントが発生し、props.changeColorが実行される.changeColorは、親コンポーネントから渡されるsetColor=(「blue」)関数を実行します.変更したステータスデータの色を構成部品、propsに渡します.タイトルカラーをカラーとして指定するh 1タイトルカラーが変更されます.
    SQL_SELF JOIN
    どのように私はAWS上でTwitterのボットを構築し、再びAzure😲🤖