Quiero cambiar el estilo de un componente de reacción usando el gancho useRef y esto es lo que hice hasta ahora,
Usé el gancho de reacción useRef para poder referirme al componente que quiero cambiar su estilo haciendo clic en los dos botones.
Pero no obtengo ninguna respuesta al hacer clic en los dos botones.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> import React, {useRef}from 'react' import SearchBox from './components/SearchBox'; import DropdownList from './components/DropdownList'; import Card from './components/Card/Card'; import data from './utils/data'; const App = ()=>{ const element = useRef(null); const gridView =()=>{ // to be implemented element.current.style.display ="inline-block" } const listView = ()=>{ // to be implemented element.current.style.display ="row"; } return( <div style={{width:500}}> <h1>Product Catalog</h1> <DropdownList/> <SearchBox /> <div> <button onClick={listView}> <span>Switch to ListView</span> </button> <button onClick={gridView}> <span>Switch to GridView</span> </button> </div> {data.products.map((product)=> <Card ref={element} src={product.getImage()}/>)} </div> ) } export default App;Está pasando la referencia a cada objeto en la lista de productos. Dudo que puedas tener múltiples objetos dom con el mismo useRef.
El siguiente fragmento funcionó para mí después de algunos ajustes. Sin embargo, solo estoy cambiando el color de los elementos enumerados con css.
import React, {useRef}from 'react' const data = { products: [ { name: 'foo', }, { name: 'boo', }, { name: 'coo', }, ] } const App = ()=>{ const element = useRef(null); const gridView =()=>{ element.current.style.color ="black" } const listView = ()=>{ element.current.style.color ="white"; } return( <div style={{width:500}}> <h1>Product Catalog</h1> <div> <button onClick={listView}> <span>Switch to ListView</span> </button> <button onClick={gridView}> <span>Switch to GridView</span> </button> </div> <div ref={element}> {data.products.map((product)=> <div>{product.name}</div>)} </div> </div> ) } export default App;