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 alerts.map(alert => (
      <div key={alert.id} className={`alert-${alert.type}`}>
        {alert.msg}
      </div>
    ));
  }
  return null
};

这里发生的事情是：

箭头功能
Array.Map
JSX
模板文字

基本上，它是一个以alerts属性（数组）为道具（<Alert alerts={[...]} />）的组件。它检查传递的数组是否存在并且不为空，然后在其上进行映射。对于数组中的每个项目，我们正在渲染包含警报消息的div。

希望这会有所帮助！

Answer 2

非常粗略（即未经测试）：

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 3

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

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

Answer 4

我认为您正在努力的通常是单行语法，如果没有大括号，则不需要返回。我的意思是，这行

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

反应单线组件

4 个答案: