Saltar al contenido

A guía para principiantes de reaccionar propsDec, 12thIn esta tutorial, vamos a aprender acerca de cómo pasar los datos a … la

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo pasar los datos a la componentsby el uso de accesorios.

Atrezzo

  • apoyos se utilizan para transmitir los datos de los padres a los componentes hijos.
  • apoyos son de sólo lectura. Véase la

Let en la práctica.

componentes funcionales

componentes funcionales en el reaccionan acepta los puntales objeto como un parámetro. Vamos a registrar el parámetro apoyos dentro del componente de abajo.

function Button(props){

console.log(props) // { }
return (

)

}

ReactDOM.render(
)

}

ReactDOM.render( )

}

function App() {

return (

)
}

Puntales de componentes basados ​​en componentes basados ​​en clases

En clase , tenemos que utilizar this.props acceder a los datos de los apoyos.

class User extends React. Component{

render(){

{this.props.name}

  • {this.props.id}
  • {this.props.age}

}

}

class App extends React. Component{

render(){
}

}

Vamos a sustituir los datos de los componentes por encima de usuario que se utilizan llaves. apoyos

class App extends React.Component{

render(){
}

}

no sólo se limitan a las cadenas o números también pueden pasar funciones, objetos o componentes.

objetos usando apoyos

class Date extends React.Component{

render(){

const {day,month,year } = this.props.data
return (

  • {day}
  • {month}
  • {year}

)
}

}

class App extends React. Component{

render(){
return(
)
}
}

En el código anterior que pasamos un objeto como un apoyo a la Fecha de componentes para que dentro del componente Fecha podemos acceder a esos datos utilizando this.props.data que pasa.

Pasando componentes como apoyo.

function Button(props) {
return ()
}

function Post(props) {
return (

{props.title}

{props.body}

{props.share}
{props.like}

)

}

class App extends React. Component {

render() {
return (

} like={

)
}
}

funciones que pasan como un puntales

function Button(props) {
return (


{props.icon("https://cdn3.iconfinder.com/data/icons/glypho-free/64/share-512.png")}

)
}

class App extends React.Component {

render() {
return (

)

}
}

En el código anterior que pasamos una función como un apoyo para el botón del componente de manera que hemos invocado esta función haciendo pasar un icono como su argumento en el interior del componente Button.

funciones Pasando como puntales se llama render apoyos técnica.