En reaccionar, específicamente haciendo referencia al paradigma ganchos/funcional, ¿cuándo necesita usar props.functionName ? Por lo que puedo decir, si las funciones tienen el mismo nombre, puede omitir los accesorios de la siguiente manera:
Padre.js
... <Child functionName={functionName}/> ...Niño.js
... functionName(); ...Sin embargo, si el nombre cambia, se debe hacer referencia a los accesorios de la siguiente manera:
Padre.js
... <Child otherName={functionName}/> ...Niño.js
... props.otherName(); ...¿Estoy en lo correcto? Si es así, ¿por qué usar el segundo patrón de diseño? (Quizás solo para señalar que la función proviene de un elemento principal y no está definida en el nivel secundario. ¿O tal vez por alguna otra razón?)
No. El nombre que use depende completamente de cómo el componente secundario procese los accesorios que se pasan. La forma en que el componente principal determina qué valor pasar es completamente irrelevante.
Si los accesorios se colocan en una variable llamada props , debe acceder a ellos a través del objeto almacenado en la variable.
const Child = (props) => { props.functionName(); ... }Si se desestructura el primer argumento, cada propiedad se almacena en su propia variable.
const Child = ({functionName}) => { functionName(); ... }Si el valor se copia en otra variable dentro del componente, también puede usar la variable en la que se copió.
const Child = (props) => { const functionName = props.functionName(); functionName(); ... }Falso, está desestructurando accesorios en React;
La desestructuración es una forma conveniente de extraer múltiples valores de los datos almacenados en objetos y arreglos (posiblemente anidados).
props es un objeto por lo que podemos usar el Destructuring
La desestructuración da acceso al uso de accesorios en un formato más legible y descarta la necesidad de accesorios para cada propiedad.
<Child functionName={functionName} name={name}/>; const child = (props)=>{ // you need to write props.functionName props.functionName(); const thisName = props.name }; const child =({functionName,name})=>{ // you dont need to write *props.* functionName(); const thisName = name };Al interactuar con un componente secundario, el nombre que usa para algo en su componente principal puede ser diferente del accesorio que requiere el componente secundario.
Solo por ejemplo, diga que su componente principal tiene algo que ver con la escuela y usted tiene:
const [studentId, setStudentId] = useState(); const [parentId, setParentId] = useState(); Pero también tiene un componente secundario para estudiantes que espera un accesorio de id . Luego, para pasarle el studentId de estudiante, haría lo siguiente:
<Student id={studentId} /> Y en ese componente secundario, lo referenciaría haciendo props.id .
no querrías hacer
const [id, setId] = useState();en el componente padre, y luego
<Student id={id} />al pasarlo porque entonces no estaría claro en el componente principal a qué ID se refería ese valor con estado; probablemente tendría que agregar un comentario.
Si es así, ¿por qué usar el segundo patrón de diseño?
A veces, como en la situación que acabo de describir, el componente secundario no está diseñado teniendo en cuenta todos los identificadores utilizados en el componente principal, lo cual es perfectamente razonable, eso es lo que permite que tantas cosas en la programación sean modulares (y adaptables y útiles). ). Como resultado, a veces es necesario que una propiedad o variable tenga un nombre en el componente principal y otro en el componente secundario, lo que requiere la
<Child otherName={functionName}/>Acercarse.