如何使用 ReactJS 映射道具创建新元素？

如果我们想使用映射道具创建新的元素/组件，那么我们可以使用 map()函数。 map() 方法创建一个新数组，其中填充了在调用数组中的每个元素上调用提供的函数的结果。

以下是 map 方法的示例：

// Sample array
const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

我们将每个元素乘以 2，就像我们也可以使用 map函数创建每个值的元素一样。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

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

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
  
class App extends React.Component {
  
  getComponent = (arr) => {
    return arr.map(value => (
       {
        alert("button " + value + " is clicked")
      }}>{value} 
    ))
  }
  
  render() {
    const components = this.getComponent([1, 2, 3, 4, 5]);
    return (
      

        {components}
      
    )
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：