ReactJS | Accesorios – Conjunto 1

Ya hemos discutido los componentes y su tipo en nuestros artículos anteriores sobre ReactJS | componentes _ Hasta ahora, trabajábamos con componentes utilizando únicamente datos estáticos. En este artículo, aprenderemos cómo podemos pasar información a un Componente.
React nos permite pasar información a un Componente usando algo llamado props (significa propiedades). Los accesorios son básicamente una especie de variable u objeto global. Aprenderemos sobre esto en detalle en este artículo.
 

Accesorios de pase y acceso

import React from 'react';
import ReactDOM from 'react-dom';
 
// sample component to illustrate props
class DemoComponent extends React.Component{
    render(){
        return(
 
                <div>
                    {/*accessing information from props */}
                    <h2>Hello {this.props.user}</h2>
                    <h3>Welcome to GeeksforGeeks</h3>
                </div>
            );
    }
}
 
ReactDOM.render(
    // passing props
    <DemoComponent user = "Harsh Agarwal" />,
    document.getElementById("root")
);

import React from 'react';
import ReactDOM from 'react-dom';
 
// functional component to illustrate props
function DemoComponent(props){
    return(
        <div>
            {/*accessing information from props */}
            <h2>Hello {props.user}</h2>
            <h3>Welcome to GeeksforGeeks</h3>
         </div>
    );
}
 
ReactDOM.render(
    // passing props
    <DemoComponent user = "Harsh Agarwal" />,
    document.getElementById("root")
);

import React from 'react';
import ReactDOM from 'react-dom';
 
// Parent Component
class Parent extends React.Component{
    render(){
        return(
                <div>
                    <h2>You are inside Parent Component</h2>
                    <Child name="User" userId = "5555"/>
                </div>
            );
    }
}
 
// Child Component
class Child extends React.Component{
    render(){
        return(
                <div>
                    <h2>Hello, {this.props.name}</h2>
                    <h3>You are inside Child Component</h3>
                    <h3>Your user id is: {this.props.userId}</h3>
                </div>
            );
    }
}
 
ReactDOM.render(
    // passing props
    <Parent />,
    document.getElementById("root")
);

import React from 'react';
import ReactDOM from 'react-dom';
 
// Parent Component
class Parent extends React.Component{
    render(){
        return(
                <div>
                    <h2>You are inside Parent Component</h2>
                    <Child name="User" userId = "5555"/>
                </div>
            );
    }
}
 
// Child Component
class Child extends React.Component{
    render(){
        console.log(this.props);
        return(
                <div>
                    <h2>Hello, {this.props.name}</h2>
                    <h3>You are inside Child Component</h3>
                    <h3>Your user id is: {this.props.userId}</h3>
                </div>
            );
    }
}
 
ReactDOM.render(
    // passing props
    <Parent />,
    document.getElementById("root")
);