Dominar los accesorios y los tipos de accesorios en React

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • ¡Registro!

  • Índice
    1. Comprender los accesorios
      1. Passing and Accessing Props
      2. Pasar funciones a través de accesorios
    2. What Are PropTypes In React?
      1. Using PropTypes
      2. Default Props
    3. Conclusion
      1. References

    Los accesorios y los tipos de accesorios son un mecanismo importante para pasar información entre los componentes de React y los analizaremos con gran detalle aquí. Este tutorial le presentará los detalles sobre accesorios, cómo pasar y acceder a accesorios, y pasar información a cualquier componente que utilice accesorios. Sin embargo, siempre es una buena práctica validar los datos que obtenemos a través de accesorios mediante PropTypes. Entonces, también aprenderá cómo integrar PropTypes en React.

     

    ¿Te confunden los accesorios y PropTypes? No estás solo. Voy a guiarte a través de todo lo relacionado con accesorios y PropTypes. Pueden hacerle la vida mucho más fácil al desarrollar aplicaciones React. Este tutorial le presentará los detalles sobre accesorios, cómo pasar y acceder a accesorios, y pasar información a cualquier componente que utilice accesorios.

    La creación de aplicaciones React implica dividir la interfaz de usuario en varios componentes, lo que implica que necesitaremos pasar datos de un componente a otro. Los accesorios son un mecanismo importante para pasar información entre los componentes de React y los analizaremos con gran detalle. Este artículo estaría incompleto sin analizar los PropTypes, porque garantizan que los componentes utilicen el tipo de datos correcto y pasen los datos correctos.

    Siempre es una buena práctica validar los datos que obtenemos como accesorios mediante PropTypes. También aprenderá a integrar PropTypes en React, verificar tipos con PropTypes y usar defaultProps. Al final de este tutorial, comprenderá cómo utilizar accesorios y PropTypes de forma eficaz. Es importante que ya tengas conocimientos básicos de cómo funciona React .

    Comprender los accesorios

    React allows us to pass information to components using things called props (short for properties). Because React comprises several components, props make it possible to share the same data across the components that need them. It makes use of one-directional data flow (parent-to-child components). However, with a callback function, it’s possible to pass props back from a child to a parent component.

     

    These data can come in different forms: numbers, strings, arrays, functions, objects, etc. We can pass props to any component, just as we can declare attributes in any HTML tag. Take a look at the code below:

    PostList posts={postsList} /

    In this snippet, we are passing a prop named posts to a component named PostList. This prop has a value of {postsList}. Let’s break down how to access and pass data.

    Passing and Accessing Props

    To make this tutorial interesting, let’s create an application that shows a list of users’ names and posts. The app demo is shown below:

    See the Pen [Passing and Accessing Props](https://codepen.io/smashingmag/pen/MWyKQpd) by David Adeneye.

    The app comprises collections of components: an App component, a PostList component, and a Post component.

    The list of posts will require data such as the content and the name of the user. We can construct the data like so:

    const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", },];

    After this, we need the App component to pull the data, Here is the basic structure of that component:

    const App = () = { return ( div PostList posts={postsList} / /div );};

    Here, we are passing an array of posts as a prop to the PostList (which we’ll create in a bit). The parent component, PostList, will access the data in postsList, which will be passed as posts props to the child component (Post). If you’ll remember, our app comprises three components, which we’ll create as we proceed.

    Let’s create the PostList:

    class PostList extends React.Component { render() { return ( React.Fragment h1Latest Users Posts/h1 ul {this.props.posts.map((post) = { return ( li key={post.id} Post {...post} / /li ); })} /ul /React.Fragment ); }}

    The PostList component will receive posts as its prop. It will then loop through the posts prop, this.props.posts, to return each posted item as a Post component (which we will model later). Also, note the use of the key in the snippet above. For those new to React, a key is a unique identifier assigned to each item in our list, enabling us to distinguish between items. In this case, the key is the id of each post. There’s no chance of two items having the same id, so it’s a good piece of data to use for this purpose.

     

    Mientras tanto, las propiedades restantes se pasan como accesorios al Postcomponente ( Post {...post} /).

    Entonces, creemos el Postcomponente y usemos los accesorios que contiene:

    const Post = (props) = { return ( div h2{props.content}/h2 h4username: {props.user}/h4 /div );};

    Estamos construyendo el Postcomponente como un componente funcional, en lugar de definirlo como un componente de clase como lo hicimos para el PostListcomponente. Hice esto para mostrarles cómo acceder a los accesorios en un componente funcional, en comparación con cómo accedemos a ellos en un componente de clase con this.props. Debido a que se trata de un componente funcional, podemos acceder a los valores utilizando props.

    Ahora hemos aprendido cómo pasar y acceder a accesorios, y también cómo pasar información de un componente a otro. Consideremos ahora cómo funcionan los accesorios con las funciones.

    Pasar funciones a través de accesorios

    En la sección anterior, pasamos una serie de datos como accesorios de un componente a otro. Pero ¿qué pasa si en su lugar trabajamos con funciones? React nos permite pasar funciones entre componentes. Esto resulta útil cuando queremos activar un cambio de estado en un componente principal desde su componente secundario. Se supone que los accesorios son inmutables; no debes intentar cambiar el valor de un accesorio. Tienes que hacerlo en el componente que lo transmite, que es el componente principal.

    Creemos una aplicación de demostración simple que escuche un evento de clic y cambie el estado de la aplicación. Para cambiar el estado de la aplicación en un componente diferente, tenemos que pasar nuestra función al componente cuyo estado necesita cambiar. De esta forma tendremos una función en nuestro componente hijo que sea capaz de cambiar de estado. Correo temporal gratis

    ¿Suena un poco complejo? He creado una aplicación React simple que cambia de estado con solo hacer clic en un botón y muestra información de bienvenida:

    Consulte el lápiz [Pasar función a través de accesorios en React] (https://codepen.io/smashingmag/pen/WNwrMEY) de David Adeneye .

    En la demostración anterior, tenemos dos componentes. Uno es el Appcomponente, que es el componente principal que contiene el estado de la aplicación y la función para establecer el estado. Será ChildComponentel niño en este escenario y su tarea es brindar la información de bienvenida cuando cambie el estado.

    Dividamos esto en código:

    class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () = { this.setState((state) = ({ isShow: !state.isShow })); }; render() { return ( div ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} / /div ); }}

    Observe que hemos establecido nuestro estado en truey el método para cambiar el estado se crea en el Appcomponente. En la render()función, pasamos el estado de la aplicación, como propiedad isShow, al ChildComponentcomponente. También pasamos la toggleShow()función como un accesorio llamado clickMe.

     

    Usaremos esto en el ChildComponentque se ve así:

    class ChildComponent extends React.Component { clickMe = () = { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( div style={{ textAlign: "center", marginTop: "8rem" }} {this.props.isShow ? ( h1 style={{ color: "green", fontSize: "4rem" }}{greeting}/h1 ) : null} button onClick={this.clickMe} h3click Me/h3 /button /div ); }}

    The most important thing above is that the App component passes down a function as a prop to the ChildComponent. The function clickMe() is used for the click handler in the ChildComponent, whereas the ChildComponent doesn’t know the logic of the function — it only triggers the function when the button gets clicked. The state is changed when the function is called, and once the state has changed, the state is passed down as a prop again. All affected components, like the child in our case, will render again.

    We have to pass the state of the app, isShow, as a prop to the ChildComponent, because without it, we cannot write the logic above to display greeting when the state is updated.

    Now that we’ve looked at functions, let’s turn to validation. It’s always a good practice to validate the data we get through props by using PropTypes. Let’s dive into that now.

    What Are PropTypes In React?

    PropTypes are a mechanism to ensure that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props.

    We can think of it like a puppy being delivered to a pet store. The pet store doesn’t want pigs, lions, frogs, or geckos — it wants puppies. PropTypes ensure that the correct data type (puppy) is delivered to the pet store, and not some other kind of animal.

    In the section above, we saw how to pass information to any component using props. We passed props directly as an attribute to the component, and we also passed props from outside of the component and used them in that component. But we didn’t check what type of values we are getting in our component through props or that everything still works.

    It’s totally upon us whether to validate the data we get in a component through props. But in a complex application, it is always a good practice to validate that data.

    Using PropTypes

    To make use of PropTypes, we have to add the package as a dependency to our application through npm or Yarn, by running the following code in the command line. For npm:

    npm install --save prop-types

    And for Yarn:

    yarn add prop-types

    To use PropTypes, we first need to import PropTypes from the prop-types package:

     

    import PropTypes from 'prop-types';

    Let’s use ProTypes in our app that lists users’ posts. Here is how we will use it for the Post component:

    Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string}

    Here, PropTypes.string and PropTypes.number are prop validators that can be used to make sure that the props received are of the right type. In the code above, we’re declaring id to be a number, while content and user are to be strings.

    Also, PropTypes are useful in catching bugs. And we can enforce passing props by using isRequired:

    Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired}

    PropTypes have a lot of validators. Here are some of the most common ones:

    Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array}

    More types are available, which you can check in React’s documentation].

    Default Props

    If we want to pass some default information to our components using props, React allows us to do so with something called defaultProps. In cases where PropTypes are optional (that is, they are not using isRequired), we can set defaultProps. Default props ensure that props have a value, in case nothing gets passed. Here is an example:

    Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return h2 Welcome, {this.props.name}h2 }}

    Here, defaultProps will be used to ensure that this.props.name has a value, in case it is not specified by the parent component. If no name is passed to the class Profile, then it will have the default property Stranger to fall back on. This prevents any error when no prop is passed. I advise you always to use defaultProps for every optional PropType.

    Conclusion

    I hope you’ve enjoyed working through this tutorial. Hopefully, it has shown you how important props and propTypes are to building React applications, because without them, we wouldn’t be able to pass data between components when interactions happen. They are a core part of the component-driven and state-management architecture that React is designed around.

    PropTypes are a bonus for ensuring that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props.

    If you have any questions, you can leave them in the comments section below, and I’ll be happy to answer every one and work through any issues with you.

    References

    • “Thinking in React”, React Docs
    • “List and Keys”, React Docs
    • “Typechecking With PropTypes”, React Docs
    • “How to Pass Props to Components in React”, Robin Wieruch

    (ks, ra, al, il)Explore more on

    • React
    • Apps
    • JavaScript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Dominar los accesorios y los tipos de accesorios en React

    Dominar los accesorios y los tipos de accesorios en React

    Implemente rápidamente. Implementar inteligentemente ¡Registro! Índice Comprender los accesorios

    programar

    es

    https://aprendeprogramando.es/static/images/programar-dominar-los-accesorios-y-los-tipos-de-accesorios-en-react-1054-0.jpg

    2024-05-21

     

    Dominar los accesorios y los tipos de accesorios en React
    Dominar los accesorios y los tipos de accesorios en React

     

     

    Top 20