反応プロップ
state と props の主な違いは、props は不変であるのに対し、state はユーザーとの対話に基づいて変更できることです。このため、一部のコンテナ コンポーネントではデータを更新および変更するために状態を定義する必要があります。 サブコンポーネントは props を介してのみデータを渡すことができます。
プロパティの使用
次の例は、コンポーネントでプロパティを使用する方法を示しています:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="php" />,
document.getElementById('example')
);
</script>
</body>
</html>インスタンスの実行»
オンラインの例を表示するには、[インスタンスの実行]ボタンをクリックしてください
名前インスタンスの属性には this.props.name が渡されて取得されます。
デフォルトのプロパティ
getDefaultProps() メソッドを通じてプロパティのデフォルト値を設定できます。例は次のとおりです:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
getDefaultProps: function() {
return {
name: 'php'
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>インスタンスの実行»
「インスタンスの実行」をクリックします。ボタンをクリックしてオンライン インスタンスを表示します
State と Props
次の例は、アプリケーションで State と Props を組み合わせる方法を示しています。親コンポーネントで状態を設定し、子コンポーネントの props を使用してそれを子コンポーネントに渡すことができます。 render 関数では、親コンポーネントから渡されたデータを取得するために名前とサイトを設定します。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var WebSite = React.createClass({
getInitialState: function() {
return {
name: "php中文网",
site: "http://www.php.cn"
};
},
render: function() {
return (
<div>
<Name name={this.state.name} />
<Link site={this.state.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
React.render(
<WebSite />,
document.getElementById('example')
);
</script>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
Propsの検証
Propsの検証ではpropTypesを使用します。これにより、アプリケーションコンポーネントが正しく使用すると、React.PropTypes は受信データが有効かどうかを検証するための多くのバリデーターを提供します。 JavaScript コンソールは、無効なデータが props に渡されると警告をスローします。
次の例では、Mytitle コンポーネントを作成します。属性 title は必須であり、数値の場合はエラーが報告されます:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var title = "php中文网";
// var title = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);
</script>
</body>
</html>「」をクリックオンラインで例を表示するには、「例を実行」ボタンをクリックしてください 例 タイトルで数値変数が使用されている場合、次のエラー メッセージがコンソールに表示されます:
警告: 失敗した propType: `MyTitle` に指定されたタイプ `number` のプロパティ `title` が無効です、期待される `string`。
詳細 バリデーターの説明は次のとおりです:
React.createClass({
propTypes: {
// 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 可以被渲染的对象 numbers, strings, elements 或 array
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 来限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 可以是多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定 shape 参数的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 任意类型加上 `isRequired` 来使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
},
/* ... */
});
