React
反応の小道具
サーチ…
備考
注: React 15.5以降では、PropTypesコンポーネントは独自のnpmパッケージ、つまり 'prop-types'に属し、PropTypeを使用するときは独自のimport文が必要です。最新の変更点については、公式の反応文書を参照してください: https : //facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html
前書き
props
子コンポーネントに親コンポーネントからのデータとメソッドを渡すために使用されます。
props
についての面白いこと
- 彼らは不変です。
- これにより、再利用可能なコンポーネントを作成することができます。
基本的な例
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
プロパティを公開します。