رد فعل الدعائم التقديم

تعرف على كيفية مساعدة Render Props في إنشاء تطبيق React

النمط الشائع المستخدم لمشاركة الحالة بين المكونات هو استخدامchildrenدعم.

داخل مكون JSX يمكنك تقديم{this.props.children}الذي يقوم تلقائيًا بحقن أي JSX تم تمريره في المكون الرئيسي كأبناء:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      /*...*/
    }
  }
render() {
return <div>{this.props.children}</div>
}
}
const Children1 = () => {}
const Children2 = () => {}
const App = () => (
<Parent>
<Children1 />
<Children2 />
</Parent>
)

ومع ذلك ، توجد مشكلة هنا: لا يمكن الوصول إلى حالة المكون الرئيسي من الأطفال.

لتتمكن من مشاركة الحالة ، تحتاج إلى استخدام مكون prop ، وبدلاً من تمرير المكونات كأطفال للمكوِّن الأصلي ، يمكنك تمرير وظيفة تقوم بتنفيذها بعد ذلك{this.props.children()}. يمكن للوظيفة قبول الوسائط:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { name: 'Flavio' }
  }
render() {
return <div>{this.props.children(this.state.name)}</div>
}
}
const Children1 = props => {
return <p>{props.name}</p>
}
const App = () => <Parent>{name => <Children1 name={name} />}</Parent>

بدلاً من استخدام ملفchildrenprop ، الذي له معنى محدد جدًا ، يمكنك استخدام أي خاصية ، وبالتالي يمكنك استخدام هذا النمط عدة مرات على نفس المكون:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { name: 'Flavio', age: 35 }
  }
render() {
return (
<div>
<p>Test</p>
{this.props.someprop1(this.state.name)}
{this.props.someprop2(this.state.age)}
</div>
)
}
}
const Children1 = props => {
return <p>{props.name}</p>
}
const Children2 = props => {
return <p>{props.age}</p>
}
const App = () => (
<Parent
someprop1={name => <Children1 name={name} />}
someprop2={age => <Children2 age={age} />}
/>
)
ReactDOM.render(<App />, document.getElementById(‘app’))

تحميل مجانيكتيب رد الفعل

رد فعل الدعائم التقديم

تعرف على كيفية مساعدة Render Props في إنشاء تطبيق React

المزيد من البرامج التعليمية للتفاعل: