React中文參考手冊
/ React 組件
React 組件
React 組件
本章節(jié)我們將討論如何使用組件使得我們的應(yīng)用更容易來管理。
接下來我們封住一個輸出 "Hello World！" 的組件，組件名為 HelloMessage：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文網(wǎng) 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>運(yùn)行實例 ?
點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例
實例解析：
React.createClass 方法用于生成一個組件類 HelloMessage。
<HelloMessage /> 實例組件類并輸出信息。
注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 HelloMessage 不能寫成 helloMessage。除此之外還需要注意組件類只能包含一個頂層標(biāo)簽，否則也會報錯。
如果我們需要向組件傳遞參數(shù)，可以使用 this.props 對象,實例如下：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文網(wǎng) 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>運(yùn)行實例 ?
點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例
以上實例中 name 屬性通過 this.props.name 來獲取。
注意，在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。
復(fù)合組件
我們可以通過創(chuàng)建多個組件來合成一個組件，即把組件的不同功能點(diǎn)進(jìn)行分離。
以下實例我們實現(xiàn)了輸出網(wǎng)站名字和網(wǎng)址的組件：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文網(wǎng) 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中文網(wǎng)" site=" http://www.miracleart.cn" />,
document.getElementById('example')
);
</script>
</body>
</html>運(yùn)行實例 ?
點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例
實例中 WebSite 組件使用了 Name 和 Link 組件來輸出對應(yīng)的信息，也就是說 WebSite 擁有 Name 和 Link 的實例。