es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo crear un componente secundario dentro de un componente y renderizarlos correctamente?

¿Cómo crear un componente secundario dentro de un componente y renderizarlos correctamente?

04 Aug, 2023 Programación

Tengo una aplicación raíz llamada “App” que contiene un componente “Content”, pero ahora deseo crear tres componentes secundarios “Part” dentro de “Content”. ¿Cómo debo hacerlo?

const Content = (props) => {
  return (
    <div>
      <p>{props.part} {props.exercise}</p>
    </div>
  )
}

const App = () => {
  const course = 'Desarrollo de aplicaciones de pila completa'
  const part1 = 'Fundamentos de React'
  const exercises1 = 10
  const part2 = 'Uso de props para pasar datos'
  const exercises2 = 7
  const part3 = 'Estado de un componente'
  const exercises3 = 14

  return (
    <div>
      <header course="{course}"></header>
      <content part="{part1}" exercise="{exercises1}"></content>
      <content part="{part2}" exercise="{exercises2}"></content>
      <content part="{part3}" exercise="{exercises3}"></content>
      <total exercise="{exercises1" +="" exercises2="" +exercises3}=""></total>
    </div>
  )
}

No estoy completamente seguro, pero este es el ejemplo que obtuve

const Content = ... {
  return (
    <div>
      <part .../="">
      <part .../="">
      <part .../="">
    </part></part></part></div>
  )
}

La pregunta de nuevo:
Refactoriza el componente “Content” para que no renderice los nombres de las partes ni la cantidad de ejercicios por sí mismo. En su lugar, solo debe renderizar tres componentes “Part” de los cuales cada uno renderiza el nombre y la cantidad de ejercicios de una parte.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para refactorizar el componente Content y que solo muestre tres componentes Part, podemos modificar el componente de la siguiente manera:

    const Content = (props) => {
  return (
    <div>
      <part part="{props.parts[0]}" exercises="{props.exercises[0]}"></part>
      <part part="{props.parts[1]}" exercises="{props.exercises[1]}"></part>
      <part part="{props.parts[2]}" exercises="{props.exercises[2]}"></part>
    </div>
  )
}

    Este componente recibe como parámetros un array de nombres de partes y un array con el número correspondiente de ejercicios para cada parte. Luego muestra tres componentes Part, pasando el nombre de la parte y el número de ejercicios apropiado para cada uno. Esto nos permite separar la responsabilidad de mostrar partes individuales del componente Content, lo que hace que el código sea más modular y más fácil de mantener.

Comments are closed.