如何将 id 属性应用于 ReactJS 组件的子元素？

我们可以从 ReactJS 组件的 props 中获取 ReactJS 组件的 ID 属性。因为我们在 ReactJS 组件中，所以我们将使用this.props而不是 props。如果 ID 属性已作为 id 传递给 ReactJS 组件，那么我们可以使用以下内容来获取传递的 ID 属性：

this.props.id

一旦我们获得 ID 属性，我们就可以轻松地将其传递给我们希望将其传递给的任何子元素，如下所示。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```

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

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

App.js

import BodyComponent from './Bodycomponent.js';
  
function App() {
    return (
        
            Hello and Welcome
            
        
    );
}
  
export default App;

Bodycomponent.js

import React from 'react';
  
function BodyComponent(props) {
    return (
        
            This is the content with the ID 'childid'.
            It has been supplied with the ID attribute of 
            the React component.
        
  
    );
}
  
export default BodyComponent;

Bodycomponent.js

import React from 'react';
  
function BodyComponent(props) {
    return (
        
            This is the content with the ID 'childid'.
            It has been supplied with the ID attribute of 
            the React component.
        
  
    );
}
  
export default BodyComponent;

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

npm start

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