javascript - paginas - ¿Cómo mostrar CSS: ninguno dentro de condicional con React JSX?

show and hide div react

Question

Estoy tratando de hacer un div en la misma página cuando el usuario hace clic en un enlace.

Mi página HTML:

<div class="stores">
  <h1>Stores</h1>
  <ul class="stores">
    <li><a href="#" onClick={this.onClick} >Store A</a></li>
    <li>Store B</li>
    <li>Store C</li>
  </ul>
</div>

Mis components/store.js.jsx :

var Store = React.createClass({
  getInitialState: function() {
    return { showStore: false };
  },
  onClick: function() {
      this.setState({ showStore: true });
  },
  render: function() {
  return(
    <div className="row account stores" style={{display: { this.state.showStore ? ''block'' : ''none''} }}>
      <div>a lot more divs</div>
        </div>
    );
  }
});

Pero me sale un:

SyntaxError: desconocido: token inesperado

Para esta línea:

style={{display: { this.state.showStore ? ''block'' : ''none''} }}

¿Cómo puedo anidar condicionalmente dentro de un estilo?

Answer 1

Esto se debe a un uso incorrecto del operador ternario. Consulte la documentación aquí: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

No debes envolverlo con {} como lo has hecho.

Intenta lo siguiente:

style={{display: this.state.showStore ? ''block'' : ''none'' }}

Answer 2

También puede cambiar un nombre de clase y un estilo en CSS.

// outside render
const NORMAL = "row account stores"
const HIDDEN = NORMAL + " hidden"

// In render
render: function() {
  return(
    <div className={this.state.showStore ? NORMAL : HIDDEN}>
      <div>a lot more divs</div>
        </div>
  );
}

Tenga en cuenta que, en general, es mejor no usar llaves dobles {{en la función de renderización, ya que a menudo está creando un nuevo objeto en cada ejecución de renderización. por ejemplo:

{display: true ? ''block'' : ''none'' } === {display: true ? ''block'' : ''none'' } // false

// outside render
const BLOCK = {diplay: ''block''}
const NONE= {diplay: ''none''}

// in render
{this.state.showStore ? BLOCK : NONE}

Answer 3

También puede crear condicionalmente el elemento a través de

   { 
     this.state.showStore 
     ? <div className="row account stores">
        <div>a lot more divs</div>
       </div> 
     : null 
   }