Comment passer d'un état className variable à une autre composante de réagir

Je ne suis pas sûr si c'est le meilleur moyen de faire des choses, mais je veux passer un nom de classe de la variable à une autre composante de réagir.

C'est un bouton qui lancer une animation onClick simplement l'ajout d'un nom de classe à quelques éléments. Aussi j'ai créé le var = superposition de cette.état.cliked ? "ouvrir": "le lancement d'une superposition, si j'ai la superposition html sur le même composant, il fonctionne très bien mais j'ai à faire, peu de composants que je peux.

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; 

Comme vous le voyez le, est le composant de la superposition que je veux passer à ce composant, mais im pas sûr si il peut juste être seul et d'être lancée dès cette une poignée de clic. je suis un peu perdu avec de réagir, non pas tant en ligne info et im nouveau à cela.

C'est la Superposition de composant:

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;

Je ne suis pas sûr de la façon de le faire, je cherche des exemples sur le web mais rien de très clair pour moi 🙁