state
كدعائم إلى مكونات state
، ولكنك لا تقتصر على تمرير البيانات. يمكنك أيضًا تمرير وظائف معالج أو أي طريقة يتم تعريفها في مكون React إلى مكون فرعي. هذه هي الطريقة التي تسمح للمكونات الفرعية بالتفاعل مع المكونات الأساسية الخاصة بها. تمر الطرق لطفل مثل الدعامة العادية. يتم تعيين اسم له ولديك إمكانية الوصول إلى اسم هذا الأسلوب ضمن this.props
في المكون التابع. MyApp
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("MyApp").length === 1; })(), "The MyApp
component should render.");'
- text: يجب أن يتم تقديم المكون GetInput
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("GetInput").length === 1; })(), "The GetInput
component should render.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("RenderInput").length === 1; })(), "The RenderInput
component should render.");'
- text: يجب أن يتلقى المكون GetInput
خاصية حالة حالة MyApp
inputValue
ويحتوي على عنصر input
بتعديل حالة MyApp
.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ""}); return waitForIt(() => mockedComponent.state() )}; const state_2 = () => { mockedComponent.find("input").simulate("change", {target: {value: "TestInput"}}); return waitForIt(() => mockedComponent.state() )}; const updated_1 = await state_1(); const updated_2 = await state_2(); assert(updated_1.inputValue === "" && updated_2.inputValue === "TestInput", "The GetInput
component should receive the MyApp
state property inputValue
as props and contain an input
element which modifies MyApp
state."); }; '
- text: و RenderInput
ينبغي أن يتلقى المكون MyApp
ممتلكات الدولة inputValue
كما الدعائم.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: "TestName"}); return waitForIt(() => mockedComponent )}; const updated_1 = await state_1(); assert(updated_1.find("p").text().includes("TestName"), "The RenderInput
component should receive the MyApp
state property inputValue
as props."); }; '
```
{this.props.input}