- 父組件向子組件通過可以通過props,但是父組件如果想要訪問子組件的DOM元素或者子組件本身(雖然這種情況比較少見),可以用refs荣赶。
父組件訪問子組件的推薦辦法:使用函數
render: function() {
return (
<TextInput
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
},
這個ref函數在裝載后或者消毀時執(zhí)行尝偎,參數input就是TextInput這個組件的實例重归,這樣就可以直接對組件實例本身進行操作。中間的判斷是基于組件消毀時為null的情況進行規(guī)避减噪,防止內存泄漏短绸。
表單元素在react中非常特殊,因為要和用戶交互相關聯(lián)筹裕,所以和其它HTML元素不太一樣醋闭。
在JSX中可以嵌入各種表達式,只需要將它們用{}包起來就行饶碘。在JSX中也可以使用各類的JS語法目尖,也必須用{}包起來。大原則就是:使用<>來使用HTML語法扎运,使用{}來調用JS語法瑟曲。
JSX允許在模板中插入一JS變量,如果該變量是一個數組豪治,就會展開這個數組的所有成員洞拨。
<script type="text/babel">
let names = [
<h1 key={'a'}>Hello World!</h1>,
<h2 key={'b'}>React is coool!</h2>,
<h3 key={'c'}>Now I'm learning it~</h3>
]
ReactDOM.render(
<div>
{names}
</div>,
document.getElementById('root')
)
</script>
- 創(chuàng)建組件
- 創(chuàng)建組建有多種辦法,React.createClass()是比較常用的一種ES5方法负拟,除此之外還有class方法和函數式方法烦衣。推薦使用class方法。
- 組建只能包含一個頂層標簽掩浙。
- 在組件一級可以加入任意屬性花吟,實例化后通過this.props可以使用這些屬性。
- 添加組件屬性厨姚,for要寫成htmlFor衅澈,class要寫成className,因為保留字的關系谬墙。
6. 獲取組件的子節(jié)點:this.props.children今布。一般搭配React.Children使用经备,這是一個例外情況,單獨記部默。
- 使用propTypes來驗證組件屬性的類型
<script type="text/babel">
let Hello = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired,
},
render: function () {
return <h1>Hello, {this.props.name}, my age is {this.props.age}</h1>
}
})
ReactDOM.render(
<Hello name={'小明'} age={11} />,
document.getElementById('root')
)
</script>
- JSX模板中樣式的寫法
style={{opacity: this.state.opacity}}
第一個大括號是JS語法侵蒙,第二個是對象。
- AJAX
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
}
在組件裝載成功后傅蹂,發(fā)出請求纷闺,但是這個請求本身是異步的;有可能組件缷載時請求還沒完贬派,所以要在組件將要缷載時廢止這個請求急但。