Come passare una variabile className a un altro componente in risposta

Question

Non sono sicuro se questo è il modo migliore di fare le cose ma voglio passare una variabile nome classe a un altro componente in risposta.

Questo è un pulsante che avvia un'animazione onClick semplicemente aggiungendo un className a pochi elementi di esso. Inoltre ho creato il var = overlay this.state.cliked? 'open': '' per avviare una sovrapposizione, se ho l'html di sovrapposizione sullo stesso componente funziona bene, ma devo fare piccoli componenti come posso.

var React = require('react'); 
var OverlayView = require('./OverlayView.jsx'); 

var StatusBarButtonView = React.createClass({ 
    getInitialState: function() { 
    return {cliked: false}; 
    }, 
    handleClick: function(event) { 
    this.setState({cliked: !this.state.cliked}); 
    }, 
    render: function() { 
    var fondo = this.state.cliked ? 'active' : ''; 
    var overlay = this.state.cliked ? 'open' : ''; 

     return (
      <div> 
       <div className={"statusbar-button-container " + (fondo)} onClick={this.handleClick}> 
        <img src="images/navbar-element-icon-cross.png" className={"rotate " + (fondo)}/> 
       </div>  
      </div> 
      <OverlayView className={overlay} /> 
     ); 
    } 
}); 

module.exports = StatusBarButtonView; 

Come si vede la è la componente della sovrapposizione voglio passare a questo componente, ma non sono sicuro se può semplicemente essere soli ed essere lanciato quando quest'ultimo gestire il clic. sono un po 'perso con reagire, non tanto informazioni online e sono nuovo con questo.

Questo è il componente Overlay:

var React = require('react'); 

var OverlayView = React.createClass({ 

     return ( 
      <div className={"overlay overlay-slidedown " + this.props.class}> 
       <nav> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Work</a></li> 
         <li><a href="#">Clients</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </nav> 
      </div> 
     ); 
    } 
}); 

module.exports = OverlayView; 

Im non sicuro come fare questo, im alla ricerca di esempi in tutto il web, ma niente di molto chiaro per me :(

Answer 1

nomi delle classi Passaggio come stringhe tra componenti e persino nomi di classi appesi nello stesso componente sono soggetti a errori e non ideali. Suggerirei di utilizzare l'helper classSet(): https://facebook.github.io/react/docs/class-name-manipulation.html

Nel tuo caso, invece di passare un puntello di classe al componente OverlayView, shou idealmente passare un puntello che descrive lo stato del componente. All'interno del componente OverlayView, calcola le classi corrette da applicare usando l'helper classSet.

Per esempio, invece di utilizzare questo:
<OverlayView className={overlay} />
si può semplicemente passare nella variabile di stato:
<OverlayView isOpen={this.state.cliked} />

nel componente OverlayView, si dovrebbe quindi creare un classi di oggetti utilizzando l'helper className:

var classes = cx({ 
    'overlay': true, 
    'overlay-slidedown': true, 
    'open': this.props.isOpen 
}); 

E modificare la riga nella funzione render() per utilizzare le classi di oggetti:

... 
<div className={classes}> 
... 

Answer 2

ho provato questa parte del codice ...

return ( 
     <div className={"overlay overlay-slidedown " + this.props.class}> 
    ); 

E tutto sembrava funzionare perfettamente per me. Ha risolto il mio problema: un puntello non riesce a interpolare quando voglio visualizzarlo accanto ad un testo statico.

La trovo migliore della risposta accettata, perché risolveva il problema parametrizzando i valori di concatenazione extra, quando questo spesso non è desiderato e contro la filosofia generale di incapsulamento.

Answer 3

Utilizzare questa:

<div className={`statusbar-button-container ${fondo}`} onClick={this.handleClick}> 

Nota: fare differenza tra 'e `. Questo segno sulla tastiera è appena lasciato alla scheda 1 e superiore.