Accesorios de React - Movimiento vernáculo React 09

Tabla de contenido

Prefacio

Configuración de un proyecto React – React Vernacular Movement 08 Presenta cómo configurar un proyecto de React: configurar el entorno, construir el proyecto e iniciar el proyecto.

Este artículo explicará con más detalle la sintaxis de React. React JSX – Reaccionar movimiento vernáculo 06 Aprendí cómo crear un componente React y la relación entre los componentes padre e hijo. Este artículo presentará el concepto de React Props, que incluye: declaración del componente React, React Props.

Declaración del componente reaccionar

Primero expliquemos aquí la sintaxis y la declaración de los componentes de React, utilizando la sintaxis del artículo anterior de JSX.

				
					importar React desde 'react'; importar ReactDOM desde 'react-dom/client'; const myElement = ( <ul> <li>Manzanas</li> <li>Plátanos</li> <li>Cerezas</li> < /ul>); const raíz = ReactDOM.createRoot(document.getElementById('root'));

Como puede ver en el código anterior, primero se declara y representa un elemento llamado myElement en la raíz. Sin embargo, además de renderizar en un archivo, también puede cargar componentes ya escritos desde otro archivo.

Primero haga algunas modificaciones al archivo anterior y asígnele el nombre app.js. Además, se declara un componente llamado fruit.jsx, y aquí también se realizan dos declaraciones.

aplicación.js

				
					importar React, { Componente } de &#039;react&#039;; importar Fruta de &#039;./frutas&#039; clase Aplicación extiende Componente { render() { return (
            <div classname="App">
                <ul>
                    <fruit fruit_name="banana"/>
                    <fruit fruit_name="apple"/>
                </ul>
            </div>

        ); } } exportar la aplicación predeterminada;

frutas.jsx

declaración de función

				
					importar Reaccionar desde &#039;reaccionar&#039;; const Fruta = (props) =&gt; {retorno <p> Este es {props.fruit_name}.</p>
} exportar fruta predeterminada;

Declaración de clase

				
					importar React desde &#039;react&#039; clase Fruit extiende React.Component { render() { return (
        <p> este es {this.props.fruit_name}.</p>
      ); } } exportar fruta predeterminada;

Los dos métodos de declaración anteriores pueden pasar accesorios, pero ahora el método principal es usar la declaración de función directamente y el método de escritura es relativamente simple.

Componentes de React, instancia de componente, diferencias de elementos

El elemento React en JSX se compone de un elemento HTML y JavaScript.
El componente es el valor de retorno en la declaración de función o declaración de clase.
La instancia de componente es una instancia de Componente.

				
					import React, { Component } from &#039;react&#039;; const Fruit = (props) =&gt; { // Fruit() es el retorno del componente <p> Este es {props.fruit_name}.</p> // <p></p> El interior es elemento } const banana = <fruit fruit_name="banana" /> // banana es una instancia del componente clase de instancia de componente App extends Component { render() { return (
            <div classname="App">
                <ul>
                    {banana}
                    <fruit fruit_name="apple" />
                </ul>
            </div>

        ); } } exportar la aplicación predeterminada;

Accesorios de reacción

En los componentes principales y secundarios, si desea pasar valores de parámetros, similar al concepto de argumentos en una función, puede usar accesorios para la transferencia. Sin embargo, todavía existen ligeras diferencias entre los componentes declarados por funciones y los componentes declarados por categorías.

declaración de función

Se puede encontrar que las declaraciones de funciones son similares a los argumentos, por lo que cuando se utilizan componentes externos, se pueden pasar mediante parámetros y los componentes de la función en sí se pueden pasar mediante accesorios. [nombre de variable].

				
					importar Reaccionar desde &#039;reaccionar&#039;; const Fruta = (props) =&gt; {retorno <p> Este es {props.fruit_name}.</p>
} exportar fruta predeterminada;

Declaración de clase

La categoría en sí es un concepto en los lenguajes de programación orientados a objetos. Una categoría tendrá sus propias variables y los accesorios se pasan a través de { this.props.[nombre de variable]}.

				
					importar React desde &#039;react&#039; clase Fruit extiende React.Component { render() { return (
        <p> este es {this.props.fruit_name}.</p>
      ); } } exportar fruta predeterminada;

Conclusión

Además de explicar el concepto de paso de parámetros en los accesorios de React, este artículo también explica diferentes formas de declaración de componentes.

Además, también se explican las diferencias entre componentes de React, instancia de componente y elementos.

Espero que el contenido anterior pueda ser útil para los lectores.

Si tiene alguna sugerencia o pregunta, ¡deje un mensaje!