Espero que entiendas este sencillo ejemplo.
Traté de cambiar el color de fondo de mi elemento HTML en el primer renderizado manejándolo en React Component con un poco de ayuda de jQuery.
Este es el código dentro de mi componente React (los accesorios se pasan del estado del componente principal ):
class QuoteBox extends React.Component { constructor(props) { super(props) } componentDidMount() { $('#root').css('background-color', this.props.color); $('#text').css('color', this.props.color); $('#author').css('color', this.props.color); } render() { return ( <div> <div id="quote-box" className="quote-box"> <div className="quote"> <span id="text" class="quote-text">{this.props.quote}</span> </div> <div id="author" className="quote-author"> <span>- {this.props.author}</span> </div> </div> ) } El código dentro de componentDidMount() parece no reconocer this.props.color . Pero si cambia a $('#root').css('background-color', 'green'); inmediatamente cambia el fondo a verde en el primer renderizado.
Pero en render() reconoce otros accesorios.
Entonces, ¿qué hice mal? ¿Hay alguna manera de apuntar al elemento HTML usando jQuery dentro de React?
Lo más probable es que esto suceda, porque en el primer renderizado props.color no está configurado. Lo más probable es que se establezca en el elemento principal y provoque una nueva representación de QuoteBox , que no ejecutará el componentDidMount que solo se ejecuta en la primera representación.
Además del hecho de que no debe mezclar la manipulación de jQuery DOM con React, solo para probar su escenario, intente usar componentDidUpdate en su lugar y lo más probable es que solucione su problema.