ReactJS-小道具の概要

州と小道具の主な違いは 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'));

結果は前の2つの例と同じになりますが、異なるのはデータのソースだけです。これは元々は state。更新する場合は、状態を更新するだけで、すべての子コンポーネントが更新されます。詳細については、イベントの章をご覧ください。