جزء رد الفعل

كيفية استخدام React.Fragment لإنشاء علامات HTML غير مرئية

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

هذا مع ذلك يسبب غير ضروريdivفي الإخراج. يمكنك تجنب ذلك باستخدامReact.Fragment:

import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <React.Fragment> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </React.Fragment> ) } }

والذي يحتوي أيضًا على صيغة اختزال لطيفة جدًا<></>التي يتم دعمها فقط في الإصدارات الأخيرة (و Babel 7+):

import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </> ) } }

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


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