[react]構成部品プロパティprops

構成部品プロパティprops

構成部品のプロパティを設定するときに使用する要素
props値は、構成部品をロードして使用する親コンポーネント(App)で設定できます.
MyComponent.js

import React from 'react';
 
const MyComponent = props => {
    return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

MyComponent.defaultProps = {
	name: '기본 이름'
}
 
export default MyComponent;

propsをレンダリングすると、jsx内部で{}の機会でラップされます.
App.js

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent name="React"></MyComponent>;
};
 
export default App;

App.jsでは、構成部品をname=「react」に設定できます.

Children

タグ間の内容を表示
MyComponent.js

import React from 'react';
 
const MyComponent = props => {
    return (
        <div>
            안녕하세요, 제 이름은 {props.name}입니다. <br />
            children 값은 {props.children}
            입니다.
        </div>
    );
};
 
MyComponent.defaultProps = {
    name: '기본 이름'
};
 
export default MyComponent;

App.js

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent>리액트</MyComponent>;
};
 
export default App;

非構造割り当て構文(構造分解構文)

関数のパラメータセクションでも使用可能
props値をクエリーするときprops.キーワードを追加せずに使用できます.
関数のパラメータがオブジェクトの場合は、構造化されていない値が直接使用されます.
MyComponent.js

import React from 'react';
 
const MyComponent = ({ name, children }) => {
    return (
        <div>
            안녕하세요, 제 이름은 {name}입니다. <br />
            children 값은 {children}
            입니다.
        </div>
    );
};
 
MyComponent.defaultProps = {
    name: '기본 이름'
};
 
export default MyComponent;

関数型素子でpropsを使用する場合、パラメータ部分に非構造化割り当て構文を使用します.

PropsTypes

propsまたはpropsのタイプを指定します.import PropTypes from 'prop-types';import構文を使用してprotTypeをインポートする
MyComponet.js

import React from 'react';
import PropTypes from 'prop-types';
 
const MyComponent = ({ name, children }) => {
    return (
        <div>
            안녕하세요, 제 이름은 {name}입니다. <br />
            children 값은 {children}
            입니다.
        </div>
    );
};
 
MyComponent.defaultProps = {
    name: '기본 이름'
};

//여기가 추가된 코드
MyComponent.propTypes = {
    name: PropTypes.string
};
export default MyComponent;

上に追加したコードは、name値がstring形式で渡される必要があることを示しています.

import React from 'react';
import MyComponent from './MyComponent';

function App(){
  return(
    <>
      <MyComponent name ={2}>리액트</MyComponent>
    </>
  )
}

export default App;

App.jsでは、name値を数値として渡すと値が表示されますが、コンソールウィンドウに警告メッセージが表示されます.

isRequired

Propが指定されていない場合に警告メッセージを解放

MyComponent.propTypes = {
    name: PropTypes.string,
		favoriteNumber: PropTypes.number.isRequired
};

上のコードはMyComponentです.jsに追加

クラス構成部品のprops

render関数では、これは.propsの表示と使用
MyComponent.js

import React, { Component } from "react";
import PropTypes from "prop-types";
 
class MyComponent extends Component {
  render() {
    const { name, favoriteNumber, children } = this.props;
 
    return (
      <div>
        안녕하세요, 제 이름은 {name}입니다. <br />
        children 값은 {children}
        입니다.
        <br />
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
      </div>
    );
  }
}
 
MyComponent.defaultProps = {
  name: "기본 이름"
};
 
MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};
 
export default MyComponent;

クラス構成部品にdefaultPropsとproTypeを設定するときにクラスで指定する方法

import React, { Component } from "react";
import PropTypes from "prop-types";
 
class MyComponent extends Component {
  static defaultProps = {
    name: "기본 이름"
  };
 
  static propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
  };
 
  render() {
    const { name, favoriteNumber, children } = this.props;
 
    return (
      <div>
        안녕하세요, 제 이름은 {name}입니다. <br />
        children 값은 {children}
        입니다.
        <br />
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
      </div>
    );
  }
}
 
export default MyComponent;

**defaultPropsとproTypesは必須ではありませんが、コラボレーション効率を向上させることができます!
App.jsをprops数字に設定する場合は、ここに{}を入れて指定します.