alternatywa v-show w React

Question

Tak jak w temacie, zamiast pisania zależności czy istnieje prosty sposób do bindowanie komponentu tak jak Vue.js ?

Comments

Nie znam Vue ale znam Reacta. Napisz co chcesz osiągnąć bardziej opisowo i po co chcesz to osiągnąć wtedy łatwiej będzie nam ci pomóc ;)

---

Mam eventKey do devConsoli która jest podpięta pod stan komponentu. Wciśnięcie klawisz pokazuje ją albo ją ukrywa. By to teraz osiągnąć muszę robić coś takiego:

{
activeDevCosole ? 
<JazzDevConsole/> : <span></span>
}

Co jest totalną głupotą i  marnowaniem miejsca.

Gdy w Vue.js mam

<JazzDevConsole v-show="activeDevConsole">

---

Chodzi o coś w rodzaju console loga ? co robi ta JazzDevConsole ? Opisz bardziej jaką pasz potrzebe. Bo kawałek kodu który pokazałeś jest dziwny i nic mu nie mówi. 

PS w react nie musisz robić pustego spana możesz to zrobić np z nullem lub korzystając z tworzenia warunków.

{
activeDevCosole ? 
<JazzDevConsole/> : null
}

lub

{
activeDevCosole &&<JazzDevConsole/>
}

ale dalej nie za bardzo wiem co chcesz osiągnąć i w jaki sposób wpływasz na zmienną activeDevCosole w przykładzie. Możesz większy kawałek kodu wrzucić na pastebina lub coś w tym stylu ?

---

Albo rendereuj albo nie renderuj komponentu, pod zdarzeniem keyPress ;p.

I tak i nie. Jest to sposób na przeskoczenie pewnych etapów plus ma komunikacje ma corem aplikacji.

mport React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Jezz from './lib/Jezz.js/index.js';
import JezzDevConsole from './lib/Jezz.js/Component/console.js';

class App extends Component {
  'use strict';
  constructor() {
    super();
    this.state = {
      startConsole: false
    };
    this.jezz = new Jezz();
  }
  componentWillMount() {
    console.log(this.jezz.consoleActive);
    if (this.canConsoleWillStart()) {
      this.listenKeyBoard();
    }
  }

  canConsoleWillStart(){
    return this.jezz.consoleActive;
  }

  listenKeyBoard(char) {
    document.addEventListener('keypress', event => this.watchKeyboard(event))
  }

  watchKeyboard(event) {
    let state = this.jezz.keyBoardManager.decide(event.key);
    if (state === 'startConsole')
    this.setState({startConsole : true})
  }
  render() {
    return (
    <section>
      <div>
      { this.state.startConsole ? (
        <JezzDevConsole />
      ) : (
        null
      )}
      </div>

      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    </section>
    );
  }
}

export default App;

keyBoardMenager przyszłości dispatcher stanów

class keyBoardManager {
  constructor(config) {
    this.config = config;
  }

  decide(key) {
    switch(key){
      case this.config.KEY_CONSOLE_PRESS: { console.log('Wciskam'); return 'startConsole'; break; }
    }
  }
}