Loading...
State در ReactJS
State جایی است که داده ها از آن می آیند. ما همیشه باید سعی کنیم تا State ما در ساده ترین شکل ممکن و کمترین تعداد کامپوننت را داشته باشد. برای مثال اگر ما ده کامپوننت که از State اطلاعات می گیرند داشته باشیم، باید یک کامپوننت به عنوان ظرف (Container) ایجاد کنیم و فقط برای یک کامپوننت که شامل ده کامپوننت دیگر است، از State اطلاعات را بگیریم.
استفاده از State
کد ساده زیر نحوه ایجاد کامپوننت stateful جدید با استفاده از سینتکس EcmaScript2016 را نشان می دهد.
محتوای فایل App.jsx:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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:
1 2 3 4 | import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app')); |
مثال فوق خروجی زیر را تولید خواهد کرد:
هیچ نظری ثبت نشده است