Jak przekazać zmienną stateName do innego komponentu w reakcji

Question

Nie jestem pewien, czy jest to najlepszy sposób robienia rzeczy, ale chcę przekazać jedną zmienną nazwy klasy do innego komponentu w reakcji.

To jest przycisk, który uruchamia animację onClick po prostu dodaje jeden className do kilku elementów tego. Również utworzyłem var = overlay this.state.cliked? "open": ", aby uruchomić nakładkę, jeśli mam nakładkę HTML na tym samym komponencie, działa dobrze, ale muszę zrobić małe elementy, jak mogę.

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; 

Jak widać jest składnikiem nakładki Chcę przekazać do tego składnika, ale nie jestem pewien, czy to może być po prostu sam i zostanie uruchomiony, gdy ten uchwyt kliknięcie. jestem trochę zagubiony z reakcją, nie tyle informacji online i jestem nowy z tym.

Jest to komponent 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 nie wiesz jak to zrobić, im szuka przykładów całym internecie, ale nic bardzo jasne dla mnie :(

Answer 1

nazwy klas Podania jako ciągi między komponenty, a nawet dołączanie nazw klas do tego samego komponentu, jest podatne na błędy i nie jest idealne.Muszę polecić użycie pomocnika classSet(): https://facebook.github.io/react/docs/class-name-manipulation.html

W twoim przypadku, zamiast przekazania wniosku klasowego do komponentu OverlayView, Shou Id najlepiej przekazać prop, który opisuje stan komponentu. Wewnątrz komponentu OverlayView obliczyć poprawne klasy do zastosowania przy użyciu pomocnika classSet.

Na przykład, zamiast korzystania z tego:
<OverlayView className={overlay} />
można po prostu przejść w zmiennej STAN:
<OverlayView isOpen={this.state.cliked} />

W komponentu wyświetlanie nakładki, byś następnie utworzyć klas obiektów za pomocą pomocnika className:

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

i zmienić linię w funkcji render() do korzystania z klas obiektów:

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

Answer 2

Próbowałem tę część kodu ...

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

I wydawało się idealnie dla mnie pracować. Rozwiązał mój problem: prop nie interpoluje, gdy chcę go wyświetlić obok tekstu statycznego.

Uważam, że jest to lepsze rozwiązanie niż przyjęta odpowiedź, ponieważ rozwiązało to problem poprzez sparametryzowanie dodatkowych wartości, które często nie są pożądane, oraz filozofię ogólną hermetyzacji.

Answer 3

Użyj tego:

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

Uwaga: Sprawdź różnicę pomiędzy 'i `. Ten znak na klawiaturze jest po prostu na karcie 1 i powyżej.