¿Cómo aplicar un atributo de identificación a un elemento secundario de un componente ReactJS?

Podemos obtener el atributo ID de un componente ReactJS de los accesorios del componente ReactJS. Como estamos dentro de un componente ReactJS aquí, vamos a usar this.props en lugar de props. Si el atributo ID se ha pasado como id al componente ReactJS, entonces podemos usar lo siguiente para pasar el atributo ID:

this.props.id

Una vez que obtengamos el atributo ID, podemos pasarlo fácilmente a cualquier elemento secundario al que deseemos pasarlo, como se muestra a continuación.

<child_element_name id = {this.props.id}>

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import BodyComponent from './Bodycomponent.js';
  
function App() {
    return (
        <div>
            <header>Hello and Welcome</header>
            <BodyComponent id='childid' />
        </div>
    );
}
  
export default App;

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

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: