Новичок: Styling ReactJS Флажок с использованием CSS Pseudo Elements

Question

Я пытаюсь создать элемент checkjs с помощью CSS. Он использует псевдоэлементы: after и: before.

Отметьте это на html и css, и это сработало! Fiddle Link

input[type="checkbox"]#checkbox + label::before { 
    content: ""; 
    display: inline-block; 
    vertical-align: -25%; 
    height: 2ex; 
    width: 2ex; 
    background-color: white; 
    border: 1px solid #c3c4c6; 
    border-radius: 4px; 
    margin-right: 0.5em; 
} 

input[type="checkbox"]#checkbox:checked + label::after { 
    content: ''; 
    position: absolute; 
    width: 1.2ex; 
    height: 0.4ex; 
    background: rgba(0, 0, 0, 0); 
    top: 0.5ex; 
    left: 0.4ex; 
    border: 3px solid #60cd18; 
    border-top: none; 
    border-right: none; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

Но когда я пытался реализовать его на моем компоненте reactjs, отображающий флажок, может быть: после того, как не работает. Fiddle ReactJS Component Link

Как я могу достичь того же стиля на компоненте флажка ReactJS?

Answer 1

Там в несколько способов использовать псевдо-элементы на React, такие как радий, но AFAIK не поддерживает: после того, как /: перед тем, вместо того, чтобы в соответствии с this и this, он предложит создать элемент вместо псевдо-элементов , Я не нашел никакого примера React, и я думаю, что доступность псевдоэлементов заключалась в том, чтобы избежать создания ненужных элементов DOM.

С учетом всех этих ограничений мое текущее решение по настройке флажка реагирует так, что оно работает в большинстве браузеров, было создание элемента, который действует, выглядит и чувствует себя как флажок (самозванец), но не флажок сам по себе (input type = "checkbox"). Я достиг этого, используя ReactJS, чтобы вызвать видимость элемента span и значка шрифта.

Example

/* html */ 
<div id="container"> 
</div> 

/* JS */ 
var Checkbox = React.createClass({ 
     getDefaultProps: function() { 
     return { 
     value: true, 
     name: '', 
     borderWidth: '1px', 
     borderStyle: 'solid', 
     borderColor: '#c3c4c6', 
     borderRadius: '4px', 
     checkColor: '#60cd18', 
     height: '1px', 
     width: '', 
     namePaddingLeft: '10px', 
     namePaddingRight: '' 
     }; 
    }, 
    render: function() { 
     var style = { 
      boxStyle: { 
      borderWidth: this.props.borderWidth, 
      borderStyle: this.props.borderStyle, 
      borderColor: this.props.borderColor, 
      borderRadius: this.props.borderRadius, 
      paddingLeft: this.props.width, 
        paddingRight: this.props.width, 
      paddingTop: this.props.height, 
      paddingBottom: this.props.height 
      }, 
      show: { 
      visibility: 'visible', 
      color: this.props.checkColor 
      }, 
      hidden: { 
      visibility: 'hidden', 
      color: this.props.checkColor 
      }, 
      name: { 
      paddingLeft: this.props.namePaddingLeft, 
      paddingRight: this.props.namePaddingRight 
      } 
     }; 
     return (
     <div> 
      <span style={style.boxStyle}> 
        <i className="fa fa-check fa-lg" style={(this.props.value) ? style.show : style.hidden}></i> 
        </span> 
      <span style={style.name}>{this.props.name}</span> 
     </div> 
     ); 
    } 
}); 

var WrapperCheckbox = React.createClass({ 
    getInitialState: function(){ 
    return {value: false} 
    }, 
    handleClick: function(){ 
    console.log('Click Fires!'); 
    this.setState({value: !this.state.value}); 
    }, 
    render: function(){ 
    return (
     <div onClick={this.handleClick}> 
      <Checkbox name='Reserve Guarantee' value={this.state.value}/> 
     </div> 
    ); 
    } 
}); 

React.render(<WrapperCheckbox />, document.getElementById('container'));