ReactJS Props

الفرق الرئيسي بين الحالة والخصائصpropsهي غير قابلة للتغيير. لذا يجب على مكونات المحول تعريف الحالة التي يمكن تحديثها وتغييرها، بينما يجب على المكونات الفرعية استخدام prop لتحويل البيانات من الحالة.

استخدام الخصائص

App.jsx

import React from 'react';
class App extends React.Component {}}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App headerProp="Header from props..." contentProp="Content
　　　from props...">, document.getElementById('app'));
export default App;

سيكون هذا النتيجة.

الخصائص الافتراضية

يمكنك أيضًا تعيين قيم الخصائص الافتراضية مباشرة في بناء المكون، بدلاً من إضافتها إلى عنصر reactDom.render().

App.jsx

import React from 'react';
class App extends React.Component { render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
App.defaultProps = {
　　　headerProp: "Header from props...",
　　　contentProp: "Content from props..."
}
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'));

الخروج كما كان من قبل.

الحالة والخصائص

السلسلة التالية تظهر كيفيةالحالةفي التطبيق، نقوم بالدمج والدعم. نضبط حالة في المكون الرئيسي ونستخدمpropsنقوم بتحويلها إلى شجرة المكونات. فيrenderفي داخل الدالة، نحن نضبطheaderPropوcontentPropفي المكونات الفرعية.

App.jsx

import React from 'react';
class App extends React.Component {}}
　　　constructor(props) {
　　　　　　super(props);
　　　　　　this.state = {
　　　　　　　　　header: "Header from props...",
　　　　　　　　　content: "Content from props..."
　　　　　　}
　　　}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<Header headerProp={this.state.header}/>
　　　　　　　　　　　　<Content contentProp={this.state.content}/>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Header extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Content extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h2>{this.props.contentProp}</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'));

النتيجة ستكون مثل الأمثلة السابقتين مرة أخرى، ولكن الفرق الوحيد هو مصدر البيانات، الذي جاء في البداية منالحالةعندما نريد تحديثه، يكفي تحديث الحالة، وسينتج عن ذلك تحديث جميع المكونات الفرعية.