렌더링 구성 요소는 상태에 따라 다르며 기능에 따라 블록/패스 전달

Question

두 가지 접근 방법이 있습니다.

내가 할 수 어쩌면

{isBtnEnabled ? (
     <button onClick={this.props.someDispatchedAction} /> 
    ) : (
     <button/> 
)} 

또는 사용해야합니까 :

더 나은 이유는 어떤 솔루션입니다

someCoolName =() => { 
    if(isBtnEnabled) 
    this.props.someDispatchedAction(); 
} 

... 

<button onClick={this.someCoolName}> 

?

Answer 1

내가 이해하는 한, 당신은 변수 isBtnEnabled을 가지며 그것이 사실인지 아닌지에 따라 button을 표시하려고합니다. 그래서 이것은 귀하의 경우 더 나은 방법이 될 것입니다 경우 : 당신이 event 핸들러를 변경하려면

{ 
    isBtnEnabled 
    && <button onClick={this.props.someDispatchedAction} /> 
} 

당신은 같은 것을 할 수 있습니다

<button onClick={isBtnEnabled && this.props.someDispatchedAction }/> 

을하지만, 당신은 단지 disable 원한다면/enablebutton 체크 아웃 @RamizWachtler의 대답은

또는 당신은이 작업을 수행 할 수 있습니다

<button onClick={this.props.someDispatchedAction} disabled={!isBtnEnabled}/> 

Answer 2

기본 disabled 속성을 사용하지 않는 이유는 무엇입니까? 어떤 해결 방법 onButtonClick

const {doSomething} = this.props; 

doSomething(); 

안쪽이

const btnProps = { 
    disabled: !isBtnEnabled 
}; 

<button onClick={this.onButtonClick} {...btnProps}> 
    Click me 
</button> 

같은 뭔가가 더 나은 이유는?

개인 기본 설정 또는 팀 내의 내부 계약에 따라 다름이라고 생각합니다. 제 생각에는 onClick 메서드와 render 메서드를 구분하는 것이 더 깔끔합니다.