React
反応の小道具

備考

前書き

props子コンポーネントに親コンポーネントからのデータとメソッドを渡すために使用されます。

propsについての面白いこと

1. 彼らは不変です。
2. これにより、再利用可能なコンポーネントを作成することができます。

基本的な例

class Parent extends React.Component{
  doSomething(){
     console.log("Parent component");
  }
  render() {
    return <div>
         <Child 
           text="This is the child number 1"
           title="Title 1" 
           onClick={this.doSomething} />
         <Child 
           text="This is the child number 2"
           title="Title 2" 
           onClick={this.doSomething} />
      </div>
  }
}

class Child extends React.Component{
  render() {
    return <div>
       <h1>{this.props.title}</h1>
       <h2>{this.props.text}</h2>
      </div>
  }
}

この例でわかるように、 propsおかげで再利用可能なコンポーネントを作成できます。

デフォルトの小道具

defaultPropsでは、コンポーネントのpropsデフォルト値またはフォールバック値を設定できます。 defaultPropsは、固定小道具で異なるビューからコンポーネントを呼び出すときに便利ですが、いくつかのビューでは異なる値を渡す必要があります。

構文

ES5

var MyClass = React.createClass({
  getDefaultProps: function() {
    return {
      randomObject: {},
      ...
    };
  }
}

ES6

class MyClass extends React.Component {...}
  
MyClass.defaultProps = {
    randomObject: {},
    ...
}

ES7

class MyClass extends React.Component {  
    static defaultProps = {
        randomObject: {},
        ...
    };
}

getDefaultProps()またはdefaultPropsの結果はキャッシュされ、 this.props.randomObjectが親コンポーネントによって指定されていない場合に値を持つことを保証するために使用されます。

PropType

propTypes使用すると、コンポーネントに必要なpropsとその種類を指定することができます。あなたのコンポーネントはpropTypesを設定せずに動作しますが、コンポーネントをより読みやすくし、コンポーネントを読んでいる他の開発者にドキュメンテーションとして機能させるように定義し、開発中にReactはあなたに警告しますあなたが設定した定義と異なるタイプの小道具を設定してください。

いくつかの原始的なpropTypesおよび一般的に使用可能なpropTypesは、

  optionalArray: React.PropTypes.array,
  optionalBool: React.PropTypes.bool,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number,
  optionalObject: React.PropTypes.object,
  optionalString: React.PropTypes.string,
  optionalSymbol: React.PropTypes.symbol

isRequiredを任意のpropTypeアタッチする場合は、そのコンポーネントのインスタンスを作成する際にそのプロップを指定する必要があります。 必要な propTypesを指定しないと、コンポーネントインスタンスを作成できません。

構文

ES5

var MyClass = React.createClass({
  propTypes: {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
  }
}

ES6

class MyClass extends React.Component {...}
  
MyClass.propTypes = {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
};

ES7

class MyClass extends React.Component {  
     static propTypes = {
        randomObject: React.PropTypes.object,
        callback: React.PropTypes.func.isRequired,
        ...
    };
}

より複雑な小道具の検証

同様に、 PropTypes使用すると、より複雑な検証を指定することができます

オブジェクトの検証

...
    randomObject: React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    }).isRequired,
...

オブジェクトの配列の検証

...
    arrayOfObjects: React.PropTypes.arrayOf(React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    })).isRequired,
...

スプレッドオペレータを使用して小道具を渡す

の代わりに

var component = <Component foo={this.props.x} bar={this.props.y} />;

各プロパティは、拡散演算子使用することができ、単一の小道具値として渡す必要がある場合は...すべて自分の価値観を伝承するES6で配列のためのサポートを。コンポーネントはこのようになります。

var component = <Component {...props} />;

渡すオブジェクトのプロパティは、コンポーネントの小道具にコピーされることに注意してください。

順序は重要です。後の属性は前の属性を上書きします。

 var props = { foo: 'default' };
 var component = <Component {...props} foo={'override'} />;
 console.log(component.props.foo); // 'override'

別のケースでは、スプレッド演算子を使用して子コンポーネントに小道具の一部だけを渡すことができます。次に、小道具から再び構造化構文を使用できます。

子供のコンポーネントがたくさんの小道具を必要とするが、それらを一つずつ渡すことは望ましくないときに非常に便利です。

 const { foo, bar, other } = this.props // { foo: 'foo', bar: 'bar', other: 'other' };
 var component = <Component {...{foo, bar}} />;
 const { foo, bar } = component.props
 console.log(foo, bar); // 'foo bar'

小道具と子供の構成

コンポーネントの「子」コンポーネントは、特別な小道具props.children利用できます。この小道具は、コンポーネントをまとめて「合成」するのに非常に役立ち、JSXマークアップをDOMの意図された最終構造をより直感的に反映させることができます。

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {this.props.children}
            </div>
        </article>
    );
}

後でコンポーネントを使用するときに任意の数のサブ要素を含めることができます。

var ParentComponent = function () {
    return (
        <SomeComponent heading="Amazing Article Box" >
            <p className="first"> Lots of content </p>
            <p> Or not </p>
        </SomeComponent>
    );
}

Props.childrenは、コンポーネントによって操作することもできます。 props.children は配列であっても配列でなくてもよいので 、ReactはReact.Childrenとしてユーティリティ関数を提供します。各段落を独自の<section>要素で折り返したい場合は、前の例を考えてみましょう：

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {React.Children.map(this.props.children, function (child) {
                    return (
                        <section className={child.props.className}>
                            React.cloneElement(child)
                        </section>
                    );
                })}
            </div>
        </article>
    );
}

React.cloneElementを使用して子の<p>タグから小道具を削除することに注意してください。小道具は不変なので、これらの値は直接変更できません。代わりに、これらの小道具のないクローンを使用する必要があります。

さらに、ループ内に要素を追加するときは、ReactがRerender 中にどのように子要素を調整するかを理解し、ループ内に追加された子要素にグローバルに一意なkey小道具を含めることを強く検討してください。

子コンポーネントのタイプの検出

子コンポーネントを反復処理するときに子コンポーネントのタイプを知ることは時には便利な場合もあります。子供のコンポーネントを反復するためにReact Children.map util関数を使うことができます：

React.Children.map(this.props.children, (child) => {
  if (child.type === MyComponentType) {
    ...
  }
});

子オブジェクトは、特定のコンポーネントと比較できるtypeプロパティを公開します。