Soy nuevo en React y acabo de comenzar un nuevo proyecto para aprenderlo. Actualmente estoy atascado en cómo obtener el valor exacto de los componentes que han sido representados por otro componente. Daré un código de ejemplo para explicarme mejor.
Digamos que he construido componentes de Frutas y Verduras, cada uno de ellos tiene
this.state = { price: 0, }y después
this.setState({price:/*randomly generated positive integer*/})y trato de encapsularlos en un nuevo componente llamado Base. En la función render() de Base tengo:
render() { return ( <> <Fruit></Fruit> <Vegetables></Vegetables> <button onClick={() => this.add()}>Add Prices!</button> </> ) }mientras que la función add () tiene como objetivo agregar los precios de los precios de frutas y verduras representados anteriormente. Intenté asignarles una identificación y usar DOM para obtener sus valores, pero no pude alcanzar su estado. ¿Hay alguna manera de lograr esto o, alternativamente, cuál es la práctica común para hacer esto en React? ¡Gracias de antemano por cualquier orientación!
Una práctica común es definir los precios en su componente principal y luego pasar esos precios como accesorios a sus hijos.
De lo contrario, podría usar una biblioteca de administración de estados como Redux para acceder a los estados desde cualquier lugar de su aplicación (esto sería demasiado para un caso tan simple)
Bueno, no debería poder modificar el estado de los componentes de React fuera del componente por definición. (Desde los padres, creo que no hay forma de hacerlo. Pero si desea actualizar desde el niño, puede transmitir una función a través de accesorios, de padre a hijo, que actualiza el estado de los padres).
Una forma simple de superar esto podría ser tener precios definidos en el estado del componente Base , luego agregar la función en el componente Base actualizaría el estado Base. Y podría pasar los precios a Frutas y Verduras a través de props.
Algo a lo largo de estas líneas:
function Base() { const [prices, setPrices] = useState({ fruit: 20, vegetable: 10, }); const add = () => { setPrices({ fruit: prices.fruit + 10, vegetable: prices.vegetable + 15 }); } return (<> <Fruit price={prices.fruit}></Fruit> <Vegetables price={prices.vegetable}></Vegetables> <button onClick={() => this.add()}>Add Prices!</button> </>); } function Fruit({price}) { //---- } function Vegetable({price}) { //..... }Sin embargo, en una aplicación compleja, pasar accesorios a través de un número N de niños puede volverse tedioso. En el futuro, cuando su aplicación crezca, es posible que desee ver React Contexts. https://reactjs.org/docs/context.html