واجهة برمجة التطبيقات للمكونات في ReactJS

تعيين الحالة

setState()يستخدم هذا النوع من الطريقة لتحديث حالة العنصر. لن يحل هذا النوع من الطريقة محل الحالة، بل سيضيف فقط تغييرات للحالة الأصلية.

import React from 'react';
class App extends React.Component {
　　　constructor() {
　　　　　　super();
　　　　　　this.state　=　{
　　　　　　　　　data:　[]
　　　　　　}
　　　　　　this.setStateHandler　=　this.setStateHandler.bind(this);
　　　};
　　　setStateHandler()　{
　　　　　　var　item　=　"تعيين الحالة..."
　　　　　　var　myArray　=　this.state.data.slice();
	　　myArray.push(item);
　　　　　　this.setState({data:　myArray})
　　　};
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<button　onClick　=　{this.setStateHandler}>تعيين الحالة</button>
　　　　　　　　　　　　<h4>مجموعة الحالة:　{this.state.data}</h4>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

نبدأ من مجموعة فارغة. عند كل ضغط على الزر، يتم تحديث الحالة. إذا تم الضغط خمس مرات، سيتم الحصول على المخرجات التالية.

تحديث قوة

في بعض الأحيان قد نرغب في تحديث عنصر يدويًا. يمكن استخدامforceUpdate()باستخدام هذا

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}>تحديث القوة</button>
　　　　　　　　　　　　<h4>رقم عشوائي: {Math.random()}</h4>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

نحن نضبط عدد عشوائي، سيتم تحديث هذا الرقم في كل مرة ننقر على الزر.

البحث عن عقدة DOM

للقيام بعمليات DOM، يمكننا استخدام الطريقة. أولاً، يجب علينا استيرادها.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}>البحث عن عقدة DOM</button>
　　　　　　　　　　　　<div id="myDiv">NODE</div>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

myDivبعد النقر على الزر، يصبح لون العنصر أخضر.

ملاحظة−منذ تحديث 0.14، لا يُنصح باستخدام معظم واجهات برمجة التطبيقات القديمة للمكونات أو حذفها لتناسب ES6.