Estoy tratando de cambiar de usar componentes de clase a componentes de función y ganchos en ReactJS. He creado un programa simple para ilustrar lo que estoy tratando de hacer.

Este es un componente secundario, que tiene un nombre y un valor:

 function Child(props) { const [value, setValue] = useState(0) function increment() { setValue(value + 1) } return (<div>Child ({props.name}): {value}</div>) }

El componente secundario se pasaría a un elemento principal, que tiene su propio valor, y cuando este valor disminuye, el valor del elemento secundario debe incrementarse:

 function Parent(props) { const [value, setValue] = useState(10) function decrement() { setValue(value - 1) } return (<div> <div>Parent: {value}</div> <button onClick={decrement}>Pass from parent to child</button> {props.child} </div>) }

El niño pasa al padre el nivel de la aplicación (en teoría, los niños se pueden cambiar dinámicamente, pero para simplificar aquí establecemos uno de dos):

 function Application(props) { const child1 = <Child name="Alice" /> const child2 = <Child name="Bob" /> const child = props.option == "Alice" ? child1 : child2 return (<Parent child={child} />) }

Ahora lo que necesito aquí es que cuando el valor del padre disminuye, el valor del hijo debe incrementarse. En React, no llamas directamente al método de un componente secundario desde el padre, por lo que estoy buscando una manera de lograr esto que también me permita cambiar el componente secundario como se muestra en el código.

Si ejecuta el lápiz de código a continuación, esto tendrá sentido.

códec