反応混同概念整理1-props(TIL#01)

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

道具は何ですか。

  • propsは「プロパティ」の略で、構成部品のプロパティを設定します.
  • ある反応素子が別の反応素子を使用する場合に伝達しなければならない値を有する場合、JSXレポートまたはサブネームは単一のオブジェクトとしてグループ化され、伝達される.
  • クラスの構成部品では、this.propsとしてインポートしてもよいし、パラメータとして関数素子をインポートしてもよい.(本論文では,関数素子についてのみ論じた.)

    • レンダリングprops


    アプリケーションコンポーネントでTestComponentという名前のコンポーネントを使用すると、nameという名前のコメントとdivエイリアスがTestComponentに渡されます.
    // App.js

import React from 'react';
import TestComponent from './components/TestComponent';

const App = () => {
  return (
    <>
      <TestComponent name="Sangsu">
        <div>Hello</div>
        <div>World</div>
      </TestComponent>
    </>
  );
};

export default App;
    TestComponentは、Appコンポーネントが渡すpropsをレンダリングします.propsをレンダリングする場合は、JSX内部に{}記号で包むだけです.
  • 子エリオットの道具.サブアイテムとして使用できます.
    • // components/TestComponent.js
import React from 'react';

const TestComponent = props => {
    return (
        <>
            {props.name}
            {props.children}
        </>
    );
};

export default TestComponent;

    propsコンソールに出力


    TestComponent構成部品に次の行を追加し、propsをコンソールに出力します.
    console.log(props);
    結果は次のとおりです.

    親コンポーネントから渡されたJSXコメントと子別名が含まれており、子別名はchildrenというArrayです.
    要素のパラメータとしてpropsを入力する場合、ES 6の構文「構造分解割り当て」(Destructuring Assignment)を使用して入力することもできます.これによりpropsを省略してレンダリングできます.
    // components/TestComponent.js
import React from 'react';

const TestComponent = ({name, children}) => {
    return (
        <>
            {name}
            {children}
        </>
    );
};

export default TestComponent;

    propsの構成


    defaultProps
  • 親構成部品に属性が指定されていない場合のデフォルト値.
    • // components/TestComponent.js
import React from 'react';

const TestComponent = ({name}) => {
    return (
        <>
            {name}
        </>
    );
};

TestComponent.defaultProps = {
	name: '기본 이름
};

export default TestComponent;
    propTypes
  • propsのタイプ(type)を指定してpropsを検証します.
  • を使用するには、propTypesパッケージからPropTypesを読み込む必要があります.
    • 必要な
  • タイプを指定するには、isRepiredを貼り付けます.
    • // components/TestComponent.js
import React from 'react';
import PropTypes from 'prop-types';

const TestComponent = ({name}) => {
    return (
        <>
            {name}
        </>
    );
};
TestComponent.propTypes = {
	name: PropTypes.string.isRequired
};

export default TestComponent;

    propsを使用する際の注意点

  • 反応素子が支柱を処理する場合、純粋な関数として表現されるべきである.すなわち,propsを勝手に修正すべきではない.stateは、変化する値に応答する責任を負います.
    • この投稿は初心者として個人学習のために書かれています!
    TIL54 - json.loads/json.load
    探索2178号迷宮