(TIL) React props

17359 ワード
テキストリンク

React Props


propsは不変のデータです.
親(親)構成部品から子(子)構成部品にデータを転送する場合、propsが使用されます.

React Props

// Car 요소에 "brand"속성을 추가한다.

const myelement = <Car brand="Ford" />;
コンポーネントはpropsオブジェクトとしてパラメータを受け入れます
// 구성 요소에서 "brand" 속성을 사용한다.

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h2>;
  }
}

Pass Date


propはデータをパラメータとして渡すことができる.
//Garage컴포넌트의 "brand"속성을 Car컴포넌트로 보낸다.

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h2>;
  }
}
class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));
転送する変数があり、文字列ではない場合は、上記の例のように変数名をカッコ内に配置します.
class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h2>;
  }
}
//"carname"이라는 변수를 만들고 Car 구성 요소로 보낸다.

class Garage extends React.Component {
  render() {
    const carname = "Ford";
    return (
      <div>
      <h1>Who lives in my garage?</h1>
      <Car brand={carname} />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));
オブジェクトの場合、
class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand.model}!</h2>;
  }
}
class Garage extends React.Component {
  render() {
    const carinfo = {name: "Ford", model: "Mustang"};
    return (
      <div>
      <h1>Who lives in my garage?</h1>
      <Car brand={carinfo} />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Props in the Constructor


構成部品にコンストラクション関数がある場合、propsは常にコンストラクション関数とsuper()メソッドによって復元されます.コンポーネントに渡す必要があります.
class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a {this.props.model}!</h2>;
  }
}

ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));
propsは読み取り専用で、値を変更しようとするとエラーが発生します.

React State


構成部品でフローデータを処理する場合はstateを使用します.React.jsアプリケーションを作成する場合は、stateを使用するコンポーネントの数を最小限に抑える必要があります.
propsとstateは顔は似ていますが、用途は違います.混同しないように、次の特性を覚えておきます.

どうやってシステムを?StringオブジェクトとByte Arrayは互いに変換しますか?
Message