हैलो मेरे पास एक घटक है जो कुछ भी वापस नहीं करता है। मैं एक ट्यूटोरियल का अनुसरण कर रहा हूं और वह व्यक्ति नए सिंटैक्स का उपयोग कर रहा है जो मुझे थोड़ा भ्रमित करता है। घटक इस तरह दिखता है:

const Alert = ({alerts}) => alerts !== null && alerts.length > 0 && alerts.map(alert => (<div key={alert.id} className={`alert-${alert.type}`}>{alert.msg}</div>));

मैं बस यह जानना चाहता हूं कि इसे सिंगल लाइन के बिना कैसे लिखा जाए। तो मैं देख सकता हूं कि क्या हो रहा है। पहले से बहुत सराहना की। क्योंकि जहां तक ​​मैं जानता हूं, आपको हमेशा कुछ न कुछ लौटाने की जरूरत होती है।

2
Kevin.a 29 अक्टूबर 2019, 18:53

3 जवाब

बहुत मोटे तौर पर (यानी, परीक्षण नहीं किया गया):

const Alert = ({alerts}) => {
  if ((alerts === null) || (alerts.length === 0)) { 
    return null
  }

  return alerts.map(alert => (
    <div
      key={alert.id}
      className={`alert-${alert.type}`}
    >
      {alert.msg}
    </div>
  ))
}
2
Dave Newton 29 अक्टूबर 2019, 15:59
const Alert = ({alerts}) => {
  if (!alerts || !alerts.length) return null

  return (
    <>
      {alerts.map(alert => (
        <div key={alert.id} className={`alert-${alert.type}`}>{alert.msg}</div>
      )}
    </>
  )
}
1
Matt Sugden 29 अक्टूबर 2019, 15:59

मुझे लगता है कि आप किसके साथ संघर्ष कर रहे हैं आम तौर पर एक-लाइनर सिंटैक्स होता है, जिसे कोई ब्रेसिज़ मौजूद नहीं होने पर वापसी की आवश्यकता नहीं होती है। मेरा मतलब यह है कि यह लाइन

return alerts.map(alert => {
  return (<div key={alert.id} className={`alert-${alert.type}`}>{alert.msg} </div>)
})

इस लाइन के समान होगा

return alerts.map(alert => (<div key={alert.id} className={`alert-${alert.type}`}>{alert.msg} </div>))
1
Konstantin 29 अक्टूबर 2019, 16:09