반응 구성 요소
React Components
이 장에서는 구성 요소를 사용하여 애플리케이션을 더 쉽게 관리하는 방법에 대해 설명합니다.
다음으로 "Hello World!"를 출력하는 구성 요소를 봉인합니다. 구성 요소 이름은 HelloMessage입니다.
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 World！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
인스턴스 분석:
React.createClass 메소드는 구성 요소 클래스 HelloMessage를 생성하는 데 사용됩니다.
<HelloMessage /> 구성 요소 클래스를 인스턴스화하고 메시지를 출력합니다.
기본 HTML 요소 이름은 소문자로 시작하지만 사용자 정의 React 클래스 이름은 대문자로 시작합니다. 예를 들어 HelloMessage는 helloMessage로 작성할 수 없습니다. 또한 구성 요소 클래스에는 최상위 레이블이 하나만 포함될 수 있으며 그렇지 않으면 오류가 보고된다는 점에 유의해야 합니다.
구성 요소에 매개 변수를 전달해야 하는 경우 this.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>인스턴스 실행»
"인스턴스 실행"을 클릭합니다. " 버튼을 눌러 온라인 예시를 확인하세요
위 예시에서 name 속성은 this.props.name을 통해 획득됩니다.
속성을 추가할 때 주의하세요. class 속성은 className으로 작성하고, for 속성은 htmlFor로 작성해야 합니다. 이는 class와 for가 JavaScript에서 예약어이기 때문입니다.
Composite Component
여러 구성 요소를 생성하여 구성 요소를 합성할 수 있습니다. 즉, 구성 요소의 서로 다른 기능적 지점을 분리합니다.
다음 예제에서는 웹사이트 이름과 URL을 출력하는 구성 요소를 구현했습니다.
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({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.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 name="php中文网" site=" http://www.php.cn" />,
document.getElementById('example')
);
</script>
</body>
</html>Run Instance»
온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요
In 예를 들어 WebSite 구성 요소는 Name 및 Link 구성 요소를 사용하여 해당 정보를 출력합니다. 즉, WebSite에는 Name 및 Link 인스턴스가 있습니다.
