Как передать переменную класса stateName другому компоненту в реакции

Question

Я не уверен, что это лучший способ сделать что-то, но я хочу передать одну переменную имени класса другому реагирующему компоненту.

Эта кнопка запускает анимацию onClick, просто добавляя одно имя класса к нескольким элементам. Также я создал var = overlay this.state.cliked? 'open': '', чтобы запустить оверлей, если у меня есть оверлейный html на том же компоненте, он отлично работает, но я должен делать небольшие компоненты, как я могу.

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; 

Как вы видите, является компонентом наложения я хочу перейти к этому компоненту, но им не уверен, если это может быть просто один, и будет запущен, когда это один обрабатывать щелчок. im немного потерял с реакцией, не так много информации в Интернете и им новым с этим.

Это компонент 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; 

Я не знаю, как это сделать, им ищет примеров по всему Интернету, но ничего не очень ясным для меня :(

Answer 1

имена классов Passing как строки между компоненты и даже имена добавочных классов в одном и том же компоненте подвержены ошибкам и не идеальны. Я бы предложил использовать помощник classSet(): https://facebook.github.io/react/docs/class-name-manipulation.html

В вашем случае вместо передачи прокрутки класса к компоненту OverlayView вы Shou ld идеально передает опору, которая описывает состояние компонента. В компоненте OverlayView вычислите правильные классы, которые будут применяться с помощью помощника classSet.

Например, вместо того, чтобы использовать это:
<OverlayView className={overlay} />
можно просто передать в переменной состояния:
<OverlayView isOpen={this.state.cliked} />

В компоненте OverlayView, вы бы тогда создать классы объектов, используя помощник Classname:

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

И изменить строку в функции визуализации(), чтобы использовать классы объекта:

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

Answer 2

Я попробовал эту часть кода ...

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

И это, казалось, отлично работает для меня. Это решило мою проблему: пропуская интерполяцию, когда я хочу отобразить ее рядом с каким-то статическим текстом.

Я нахожу это лучше, чем принятый ответ, потому что это решило проблему путем параметризации дополнительных значений concat'd, когда это часто нежелательно и против общей философии инкапсуляции.

Answer 3

Используйте это:

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

Примечание: Сделать разницу между 'и `. Этот знак на клавиатуре остается слева от 1 и выше.