ReactJS 菜鳥教程
ReactJS 組件API
在本章中，我們將解釋React組件API。我們將討論三種方法:setState()， forceUpdate和react . finddomnode()。在新的ES6類中，我們必須手動綁定它。我們將在示例中使用this.method.bind(this)。
設(shè)置狀態(tài)
setState()方法用于更新組件的狀態(tài)。此方法不會替換狀態(tài)，而只會添加對原始狀態(tài)的更改。
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data: []
}
this.setStateHandler = this.setStateHandler.bind(this);
};
setStateHandler() {
var item = "setState..."
var myArray = this.state.data.slice();
myArray.push(item);
this.setState({data: myArray})
};
render() {
return (
<div>
<button onClick = {this.setStateHandler}>SET STATE</button>
<h4>State Array: {this.state.data}</h4>
</div>
);
}
}
export default App;我們從一個空數(shù)組開始。每次單擊按鈕，狀態(tài)都會更新。如果單擊五次，將得到以下輸出。
強制更新
有時我們可能想手動更新組件。這可以使用forceUpdate()方法來實現(xiàn)。
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
};
forceUpdateHandler() {
this.forceUpdate();
};
render() {
return (
<div>
<button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
<h4>Random number: {Math.random()}</h4>
</div>
);
}
}
export default App;我們正在設(shè)置一個隨機數(shù)字，該數(shù)字將在每次單擊按鈕時更新。
查找Dom節(jié)點
對于DOM操作，我們可以使用方法。首先，我們需要導(dǎo)入。ReactDOM.findDOMNode()react-dom
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor() {
super();
this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
};
findDomNodeHandler() {
var myDiv = document.getElementById('myDiv');
ReactDOM.findDOMNode(myDiv).style.color = 'green';
}
render() {
return (
<div>
<button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
<div id = "myDiv">NODE</div>
</div>
);
}
}
export default App;myDiv單擊按鈕后，元素的顏色變?yōu)榫G色。
注意?自從0.14更新以來，不推薦使用大多數(shù)舊的組件API方法或?qū)⑵鋭h除以適應(yīng)ES6。