註意 /`會報錯 React的props React中的每一個組件，都包含有一個屬性（props），在組件內部，我們可以通過this.props獲取屬性對象。 組件如下： 屬性使用方法： 1.直接調key/value 2.延展屬性 用{...props}方法 3.調用組件的setProps函數來指定 ...
<!DOCTYPE html>
<!-- React 允許將代碼封裝成組件（component），
然後像插入普通 HTML 標簽一樣，在網頁中插入這個組件。 -->
<html>
<head>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/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="Helen" />,
document.getElementById('example')
);
</script>
</body>
</html>
註意
<HelloMessage name="Helen" />是個半閉合標簽，少/會報錯
React的props
React中的每一個組件，都包含有一個屬性（props），在組件內部，我們可以通過this.props獲取屬性對象。
組件如下：
React.render(
<HelloWorld name="Jack"/>, //name屬性的值是“jack”
document.getElementById('container')
); 屬性使用方法：
1.直接調key/value
var HelloWorld = React.createClass({
render:function(){
return {
<div> hello{this.props.name} </div>
}
}
}); 2.延展屬性
用{...props}方法
<div id="example"></div>
<script type="text/babel">
// 創建組件 React.createClass
var HelloMessage = React.createClass({
render:function () {
return <h1>hello {this.props.name1},{this.props.name2}</h1>
}
})
var props = {
name1:"andy",
name2:"tom"
}
ReactDOM.render(
<HelloMessage {...props}/>,
document.getElementById('example')
);
</script>3.調用組件的setProps函數來指定屬性
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render:function () {
return <h1>hello {this.props.name}</h1>
}
})
var instance = React.render( // 為什麼不是ReactDOM.render？？
<hello />,
document.getElementById('example');
)
instance.setProps({name:'jack'});
</script>自己設置了組件的屬性值。
