Estructura de componentes con React

drakkenspain #1 Oct '18

Buenas!

Estoy preparando mentalmente una aplicación que quiero hacer con React, y me he encontrado con una duda o problema.

El concepto general es que quiero renderizar una serie de preguntas dentro de otro componente. Estas preguntas usarán el componente Question, que será algo así:

spoiler

check() {
  return this.state.answer === this.props.solution;
}

handleChange(event) {
  this.setState({ answer: event.target.value });
}

render() {
  return (
    <div>
      <label>{this.props.question}</label>
      <input type="text" value={this.state.answer} onChange={(event) => this.handleChange(event)} />
      <span>{this.check() ? 'Correct' : 'Incorrect'}</span>
    </div>
  );
}

El componente tiene un método check que comprueba si la respuesta es igual a la solución propuesta. Si es correcta, renderizará Correct y si no lo es, renderizará Incorrect.

Hasta ahí todo bien. El principal problema que tengo es que me gustaría que el componente padre llame a cada una de las funciones check de cada pregunta.

El componente padre será algo así:

spoiler

checkAll() {
  // Llamar al método check de todos los componentes Question
}

render() {
  return (
    <div>
      {
        this.props.questions.map((question) => {
          return <Question question={question.label} solution={question.solution} />
        });
      }
      <button onClick={() => this.checkAll()}>Check</button>
    </div>
  );
}

Con este planteamiento, para poder llamar a las funciones check de cada pregunta, necesitaría crear un ref a todas las preguntas, algo asi como

'question' + index

Mi experiencia con React es muy limitada, pero no me parece que esta sea la forma adecuada de trabajar con ella, asi que estoy intentado plantearlo de otra forma.

Mi primera idea era extraer el método check del componente Question e implementarlo en el componente padre, pero de alguna forma me parece mas intuitivo que Question contenga la lógica para hacer la comprobación

Alguna sugerencia para reestructurar todo esto o guiarme en la dirección correcta?

Gracias!

QuitCat #2 Oct '18 Gafe

Por lo general la lógica reside en componentes superiores y el componente hijo es lo mas "dummy" posible.

Aún así no termino de entender para que quieres llamar desde fuera a la función check de cada pregunta. No va haber ningún cambio visual, solamente devuelve si es o no correcta cada una de ellas. Si puedes explica un poco mas detallado que es lo que quieres conseguir, o el contexto de lo que esta pasando o quieres que pase en esa sección de tu web

1 respuesta

B

[Borrado] #3 Oct '18

#1 En el hijo no llames a this.check() en el span, básalo en una prop controlada por el state del padre, así lo puedes controlar a tu antojo. Si no sólo lo ejecutará react con cada (re-)render. Para tu problema puedes tirar de refs como dices o manejar en el estado del padre los estados de cada pregunta, puedes utilizar un map en el state para ello. Yo dejaría los hijos funcionando con props y sin state, si no puedes acabar en un conflicto de states entre padre e hijos.

#2 Lo que quiere es que el usuario tenga un botón con el que poder analizar todas las respuestas de una vez.

Estructura de componentes con React

Usuarios habituales

Tags