ReactJS-소품 개요

상태와 소품의 주요 차이점은 props불변입니다. 이것이 컨테이너 구성 요소가 업데이트 및 변경 가능한 상태를 정의해야하는 반면 자식 구성 요소는 props를 사용하여 상태에서 데이터 만 전달해야하는 이유입니다.

소품 사용

컴포넌트에 불변 데이터가 필요할 때 props를 추가하면됩니다. reactDOM.render() 기능 main.js 컴포넌트 내부에서 사용합니다.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

그러면 다음과 같은 결과가 생성됩니다.

기본 소품

기본 속성 값을 구성 요소 생성자에 추가하는 대신 직접 설정할 수도 있습니다. reactDom.render() 요소.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

출력은 이전과 동일합니다.

상태 및 소품

다음 예는 결합하는 방법을 보여줍니다. state앱의 소품. 부모 구성 요소에 상태를 설정하고 다음을 사용하여 구성 요소 트리 아래로 전달합니다.props. 내부render 기능, 우리는 설정하고 있습니다 headerPropcontentProp 하위 구성 요소에 사용됩니다.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

결과는 이전 두 예에서와 동일합니다. 유일한 차이점은 데이터 소스입니다. state. 업데이트를 원할 때 상태 만 업데이트하면 모든 하위 구성 요소가 업데이트됩니다. 이에 대한 자세한 내용은 이벤트 장을 참조하십시오.