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 기능, 우리는 설정하고 있습니다 headerProp 과 contentProp 하위 구성 요소에 사용됩니다.

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. 업데이트를 원할 때 상태 만 업데이트하면 모든 하위 구성 요소가 업데이트됩니다. 이에 대한 자세한 내용은 이벤트 장을 참조하십시오.