حالة ReactJS

الحالةهي مصدر البيانات. يجب علينا الحفاظ على بسيطة قدر الإمكان لحالتنا وتقليل عدد المكونات القابلة للتغيير. على سبيل المثال، إذا كان لدينا 10 مكونات تحتاج إلى بيانات من الحالة، يجب علينا إنشاء مكون حاوي يحتوي على حالة جميع المكونات.

استخدام الحالة

يظهر هذا المثال كيفية إنشاء مكونات قابلة للتغيير باستخدام لغة EcmaScript2016.

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{　　　constructor(props)　{　　　　　　super(props);
　　　　　　this.state　=　{
　　　　　　　　　header:　"Header　from　state...",
　　　　　　　　　content:　"Content　from　state..."
　　　　　　}
　　　}　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.state.header}</h1>
　　　　　　　　　　　　<h2>{this.state.content}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App　/>,　document.getElementById('app'));

سيتم إنتاج النتيجة التالية.