state
المهمة لتطبيقك ، والذي يجعل مكونات الطفل ثم. تريد هذه المكونات للوصول إلى بعض القطع من تلك state
، والتي يتم تمريرها في الدعائم. على سبيل المثال ، ربما يكون لديك مكون App
يعرض شريط Navbar
، ضمن المكونات الأخرى. في App
، لديك state
تحتوي على الكثير من معلومات المستخدم ، ولكن يحتاج شريط Navbar
إلى الوصول إلى اسم المستخدم الخاص بالمستخدم فقط حتى يمكنه عرضه. يمكنك تمرير هذه state
إلى مكون Navbar
كدعم. يوضح هذا النمط بعض النماذج المهمة في React. الأول هو تدفق البيانات أحادي الاتجاه . تدفقات الحالة في اتجاه واحد أسفل شجرة مكونات التطبيق الخاص بك ، من المكون الرئيسي الحزينة إلى المكونات التابعة. المكونات التابعة فقط تتلقى بيانات الحالة التي يحتاجونها. والثاني هو أن التطبيقات الرسمية المعقدة يمكن تقسيمها إلى عدد قليل فقط ، أو ربما مكون واحد مؤكد. بقية المكونات الخاصة بك ببساطة تتلقى حالة من الوالد كما الدعائم ، وجعل واجهة المستخدم من تلك الحالة. ويبدأ في إنشاء فصل حيث يتم التعامل مع إدارة الولاية في جزء واحد من التعليمات البرمجية و UI تقديم في آخر. هذا المبدأ لفصل منطق الدولة من منطق واجهة المستخدم هو أحد المبادئ الرئيسية لـ React. عندما يتم استخدامه بشكل صحيح ، فإنه يجعل تصميم التطبيقات المعقدة والحافلة سهلة الإدارة. MyApp
هو stateful ويعرض مكون Navbar
كطفل. تمرير name
الملكية في في state
وصولا الى عنصر الطفل، ثم تظهر name
في h1
العلامة التي جزء من Navbar
تقديم الأسلوب. MyApp
component should render with a Navbar
component inside.");'
- text: ''
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").props() )}; const navProps = await setState(); assert(navProps.name === "TestName", "The Navbar
component should receive the MyApp
state property name
as props."); }; '
- text: ''
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find("Navbar").find("h1").text(); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").find("h1").text() )}; const navH1After = await setState(); assert(new RegExp("TestName").test(navH1After) && navH1After !== navH1Before, "The h1
element in Navbar
should render the name
prop."); }; '
```