专业编程基础技术教程

网站首页 > 基础教程 正文

怎么在 JSX 中进行循环控制?(js循环执行代码)

ccvgpt 2024-07-28 12:05:11 基础教程 7 ℃
  • map 将数组每一项转成 界面,flatMap filter 等能返回数组的方法也已被支持
render() {
  const { data } = props
  return data.map(item => <b id={item.id}>{item.text}</b>)
}
  • 使用 javaScript 的循环(for / while / do while),将结果存储到变量,将变量代入 JSX
render() {
  const { data } = props
  const datas = Array(data.length)
  for (let i = 0; i < data.length; i++) {
      const item = data[i]
      datas[i] = <b id={item.id}>{item.text}</b>
  }
  return datas
}
  • 使用 lodash 等第三方库或自定义可以返回数组的方法,以 lodash 为例
render() {
  const { data } = props
  return _.times(data.length, i => <b id={data[i].id}>{data[i].text}</b>)
}

最后

有写错的,或者有什么问题,评论区见 。

怎么在 JSX 中进行循环控制?(js循环执行代码)

Tags:

最近发表
标签列表