반응 소품
state와 props의 주요 차이점은 props는 변경할 수 없는 반면 상태는 사용자와의 상호 작용에 따라 변경될 수 있다는 것입니다. 이것이 바로 일부 컨테이너 구성 요소가 데이터를 업데이트하고 수정하기 위해 상태를 정의해야 하는 이유입니다. 하위 구성요소는 소품을 통해서만 데이터를 전달할 수 있습니다.
Using Props
다음 예제는 구성 요소에서 props를 사용하는 방법을 보여줍니다.
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.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>Run Instance»
온라인 예제를 보려면 "Run Instance" 버튼을 클릭하세요
이름 인스턴스의 속성이 this.props.name으로 전달되어 가져옵니다.
Default Props
getDefaultProps() 메소드를 통해 props의 기본값을 설정할 수 있습니다. 예시는 다음과 같습니다.
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.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>Run Instance»
"Run Instance"를 클릭합니다. 버튼을 눌러 온라인 인스턴스를 확인하세요
State and Props
다음 예는 애플리케이션에서 상태와 Prop을 결합하는 방법을 보여줍니다. 상위 구성 요소에서 상태를 설정하고 하위 구성 요소의 props를 사용하여 이를 하위 구성 요소에 전달할 수 있습니다. 렌더링 함수에서는 상위 구성 요소가 전달한 데이터를 가져오기 위해 이름과 사이트를 설정했습니다.
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.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는 들어오는 데이터가 유효한지 확인하기 위해 많은 유효성 검사기를 제공합니다. 잘못된 데이터가 props에 전달되면 JavaScript 콘솔에서 경고가 표시됩니다.
다음 예에서는 속성 제목이 필수이며 문자열인 경우 오류가 보고됩니다.
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>예제 실행»
" 예제 실행" 버튼을 눌러 온라인으로 보기 예제
title이 숫자 변수를 사용하는 경우 다음 오류 메시지가 콘솔에 표시됩니다.
Warning: Failed propType: `MyTitle`에 제공된 `number` 유형의 잘못된 prop `title` , `string`이 필요합니다.
More 유효성 검사기 설명은 다음과 같습니다.
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!');
}
}
},
/* ... */
});
