هناك عدة طرق لتمرير القيم في توجيه التفاعل

هناك ثلاث طرق لتمرير القيم في توجيه التفاعل: 1. طريقة "props.params"، والتي يمكنها تمرير قيمة واحدة أو أكثر، ولكن نوع كل قيمة عبارة عن سلسلة ولا يمكنها تمرير كائن. والتي تشبه الطريقة طريقة get في النموذج. يتم تمرير المعلمات بنص واضح، ولكن سيتم فقدان المعلمات عند تحديث الصفحة. name" في هذه الطريقة، كما سيتم فقدان المعلمات عند تحديث الصفحة.

بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 10، إصدار التفاعل 17.0.1، كمبيوتر Dell G3.

هناك عدة طرق لتمرير القيم في توجيه التفاعل

هناك ثلاث طرق لتمرير القيم في المسارات:

1.props.params (مستحسن)

// تعيين التوجيه <Router History={hashHistory}> <Route path='/user/:name' Compon={UserPage}></Route> </Router>import { Router,Route,Link,hashHistory} from 'react -router';class App يمتد React.Component { render() { return ( <Link to="/user/sam">user</Link> // أو hashHistory.push("/user/sam");​ ) } }

عندما تنتقل الصفحة إلى صفحة UserPage، قم بإخراج القيمة التي تم تمريرها:

تصدير الفئة الافتراضية UserPage Extends React.Component{ buildor(props){ super(props); render(){ return(<div>this.props.match.params.name</div>) }}

يمكن للطريقة المذكورة أعلاه تمرير قيمة واحدة أو أكثر، ولكن نوع كل قيمة هو سلسلة، ولا يمكن تمرير كائن، ويمكن تحويل كائن json إلى سلسلة، ثم تمريره ، يقوم json بتحويل السلسلة إلى كائن وإخراج البيانات

// تحديد المسار <Route path='/user/:data' Compon={UserPage}></Route>// تعيين المعلمات var data = {id:3,name:sam,age:36};data = JSON. stringify(data);var path = `/user/${data}`;//قيمة المرور <Link to={path}>user</Link>//أو hashHistory.push(path);//احصل على المعلمة var data = JSON.parse(this.props.params.data);var {id,name,age} = data;

2.query (غير مستحسن: يتم فقدان معلمات صفحة التحديث)

طريقة الاستعلام سهلة الاستخدام للغاية، تشبه طريقة get في النموذج، ويتم تمرير المعلمات بنص عادي.

// تحديد المسار <Route path='/user' Compon={UserPage}></Route>// تعيين المعلمات var data = {id:3,name:sam,age:36};var path = { pathname:' /user', query:data,}// تمرير القيمة <Link to={path}>user</Link>// أو hashHistory.push(path);//احصل على المعلمة var data = this.props.location.query ;var {id,name,age} = data;

3.state (غير مستحسن، يتم فقدان معلمات صفحة التحديث)

يشبه وضع الحالة وضع النشر، واستخدامه مشابه للاستعلام.

// تعيين التوجيه <Route path='/user' Compon={UserPage}></Route>// تعيين المعلمات var data = {id:3,name:sam,age:36};var path = { pathname:' /user',state:data,}//قيمة المرور <Link to={path}>user</Link>//أو hashHistory.push(path);//احصل على المعلمة var data = this.props.location.state ;var {id,name,age} = data;

نصائح خاصة:

1. استخدم this.props.match.params.name عند الحصول على المعلمات.

2. في حالة الطباعة في مكون فرعي، تذكر تمرير this.props، كما يلي:

class Todolist Extends Component { render() { return ( <DocumentTitle title="todolist"> <div id="home-container"> <section> <TodolistList {...this.props}/> // إذا لم يتم تمرير هذا .props هو كائن فارغ </section> </div> </DocumentTitle> } } }export default Todolist;