ReactJS 中 for 循环和 if-else 块的替代方案

如果你曾经尝试在 React 中使用 for 循环，那么你一定熟悉错误声明 Unexpected token 如果你也使用 if 条件，也会出现同样的错误。

伪代码：

import React from 'react'
import ReactDOM from 'react-dom'
import Component from "./Component"

function App() {
  return (
    

        {
          for(let i =0 ; i< 5 ; i++)
             
        }
    
}

const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)

解释：浏览器不理解 react.js，所以 webpack （例如 Babel）在编译时将 React.js 转换为 JavaScript。 React.js 中的一切都归结为纯 JavaScript。因此，如果您在 react.js 中编写了不是有效 JavaScript 的内容，那么您将收到编译错误。上面代码中的问题是 return 语句总是需要一个值，但是一个 for 循环和 if 块不返回任何值。所以使用这些的替代方案应该返回一些东西。

第 1 步：创建 React 应用程序

npx create-react-app loops

第 2 步：创建项目文件夹 ieloops 后，使用以下命令移动到该文件夹：

cd loops

项目结构：它将如下所示。

1. For 循环替代方案：通过使用 Map 你几乎可以做任何 for 循环所做的事情。此外， Map 返回一个数组，因此不会有任何编译错误。在返回每个组件时不要忘记添加一个 key 道具。

句法：

{ arr.map((parameter) => (//logic) )}

App.js

import React from 'react'
import ReactDOM from 'react-dom'
  
  
function App() {
const items = [1,2,3,4,5]
  return (
    

      { items.map((item,index) => 
       (
 Hello World {item} 
) )}
    
  )
}
  
export default App;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：现在打开浏览器并转到 http://localhost:3000/

for 循环但在 return 之外：这里我们在 return 语句之外循环遍历数组并存储组件数组，然后在 return 语句内部渲染数组。

句法：

for(initialization; condition; updation) {  //logic }

应用程序.js

import React from 'react'
import ReactDOM from 'react-dom'
  
  
function App() {
const items = [1,2,3,4,5]
let components = [] 
for(let i = 0 ; i < items.length ; i++ ){
  components.push(
Hello Word {items[i]}
)
}
  return (
    

      {components}
    
  )
}
  
export default App;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：现在打开浏览器并转到 http://localhost:3000/

2. if-else 块 替代方案：三元运算符的作用与 if-else 块的作用相同。如果您只想要一个 if 条件检查，那么您可以在 else 部分写入null 。

句法：

{ (condition) ? true : false }

应用程序.js

应用程序.js

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() {
const x = 12
  return (
    

        {x % 2 === 0 ? (
x is Even
) : (
 x is Odd
)}
    
  )
}

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：现在打开浏览器并转到 http://localhost:3000/