React에서 클래스 추가/제거의 올바른 방법

나는 대답 초보자이며 질문이 있습니다!React에서 클래스 추가/제거의 올바른 방법

내가 게시하는 가장 좋은 방법은 React에서 HTML에 클래스를 추가/제거하는 것이 무엇인지 명확한 답을 찾을 수 없었기 때문입니다. 내 첫 React 앱을 만들었고 특정 동작이 발생할 때 클래스를 추가/제거하여 내 앱의 요소 중 일부에 애니메이션을 적용하기 시작했습니다.

나는 상태를 통해 애니메이션을 적용 할 요소 클래스를 통과했다 : 여기

내가 한 일이다. 상태과 같이 초기 값을 부여한다 : 중 하나

<div className={this.props.cartClasses}>

getInitialState: function() { 
    return { 
     cartClasses:"order-wrap" 
     } 
}

그럼 I 가지고있는 상태를 수신하고, 그래서 같은 카트 클래스를 구현하는 하위 구성 요소에 대한 상태를 전달

newTotalClean != 0 ? this.setState({cartClasses:"order-wrap cart-out"}) : this.setState({cartClasses:"order-wrap"});

을 기본적으로는 newTotalClean라는 내 변수 중 하나를 평가하고 0과 동일하지 않는 경우가 cartClasses의에 "orde를 상태를 업데이트합니다 문이 경우 제 기능을 나는 다음과 같은 한 r-wrap cart-out "을 추가하여 CSS 애니메이션 효과가 포함 된 추가 클래스를 추가합니다.

보통 jQuery Add/removeClass()를 사용 하겠지만 사용 방법을 제한하려고 시도하고 있으며 더 좋은 방법으로 상태에 클래스를 저장하는 것이 가장 좋은 방법인지 아닌지 잘 모르겠습니까?

도움 주셔서 감사합니다.

출처

2016-09-14 Anonymous

ReactCSSTransitionGroup을 사용하시기 바랍니다. 대신 className을 설정, 당신은 다음과 같이 전환 이름을 설정 :

<ReactCSSTransitionGroup 
    transitionName="example" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={300} 
> 
    ... some code here .. 
</ReactCSSTransitionGroup>

가 this page가에서 애니메이션에 대한 자세한 내용은 반응을 참조하십시오.

출처

2016-09-14 23:00:14

아마도 이것이 표준 '반응'방식에 가장 가깝습니다. 내 방법이 잘못되었거나 OK 해결 방법이라고 말씀해 주시겠습니까? –

이것은 내가 일반적으로하는 일입니다. 클래스 이름을 포함하는 변수를 만들고이 변수를 jsx에 넣습니다. 의 라인을 따라 뭔가 :이 도움이

magic: function() { 
    var myClass = this.state.cartClasses; 

    if (condition) { 
    this.setState({ cartClasses: 'class1' }); 
    } else { 
    this.setState({ cartClasses: 'class2' }); 
    } 

    return (
    <div className={myClass}> 
     hello world 
    </div> 
); 
}

희망 :

출처

2016-09-15 00:27:43 helfi

여러 클래스 이름을 결합하는 데 사용할 수있는 클래스 이름라는 자바 스크립트 유틸리티가 있습니다.

이것은 자신의 github 페이지 link입니다. 이 내용은 더 명확 해졌으며 이해하기가 더 직관적이었습니다. 는 예를 들어, 코드는

var cartClasses = classNames('order-wrap',{'cart-out': newTotalClean!=0});

위 기본적으로 클래스라는 주문 랩 할당하고 조건이 충족되는 경우에만, 다른 클래스가 지정되어있을 것이라고 말했다으로 기록 될 수있다.

출처

2016-09-15 09:00:16

React에서 클래스 추가/제거의 올바른 방법

답변

관련 문제