Mucha gente dice que es malo tener jQuery y React funcionando porque ambos funcionan en el DOM. Pero, ¿estaría bien si solo usara jQuery para cambiar las propiedades de estilo (por ejemplo, color, ancho de borde, color de fondo, etc.)? Esto sería principalmente por conveniencia, ya que $(.foo) es mucho más fácil de usar que document.getElementByClassName('foo') .
Si bien es posible , probablemente no sea una buena idea: debe asegurarse de que los cambios de estilo se apliquen a todos los elementos secundarios aplicables cuando el componente se vuelva a representar.
Si no le gusta la verbosidad de document.getElementByClassName , siéntase libre de abstraerlo en una función, por ejemplo
const $ = selector => document.querySelector(selector)Pero sería mejor evitar por completo los métodos de manipulación de DOM nativos. En React, el estado de la aplicación debe fluir completamente desde el estado de React.
Para cambiar el estilo de la manera adecuada en React, escríbalo en el JSX. Por ejemplo:
const App = () => { const [highlighted, setHighlighted] = React.useState(); return ( <div className={highlighted ? 'highlighted' : ''} onClick={() => setHighlighted(true)} >click</div> ); }; ReactDOM.render(<App />, document.querySelector('.react')); .highlighted { background-color: yellow; } <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>O, si desea establecer el estilo directamente en el elemento, en lugar de usar una clase:
const App = () => { const [highlighted, setHighlighted] = React.useState(); return ( <div style={{ backgroundColor: highlighted ? 'yellow' : '' }} onClick={() => setHighlighted(true)} >click</div> ); }; ReactDOM.render(<App />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>