Реагировать на однолинейный компонент

Question

Здравствуйте, у меня есть компонент, который ничего не возвращает. Я следую учебному пособию, и человек использует новый синтаксис, который немного смущает меня. Компонент выглядит так:

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

Я просто хочу знать, как написать это без единой строки. Так что я могу видеть, что происходит. Очень ценится заранее. Насколько я знаю, вам всегда нужно что-то возвращать.

Answer 1

Очень приблизительно (т. Е. Не проверено):

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>
  ))
}

Answer 2

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

Здесь представлены следующие вещи:

1. Функции стрелок
2. Array.Map
3. JSX
4. Литералы шаблонов

В основном это компонент, который получает свойство alerts (Array) в качестве реквизита (<Alert alerts={[...]} />). Он проверяет, присутствует ли переданный массив и не является ли он пустым, а затем сопоставляется с ним. Для каждого элемента в массиве мы визуализируем div, содержащий предупреждающее сообщение.

Надеюсь, это поможет!

Answer 3

Я думаю, что вы боретесь, как правило, с однострочным синтаксисом, который не требует возврата, если отсутствуют фигурные скобки. Я имею в виду, что эта строка

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>))

Answer 4

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

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