渲染組件依賴於函數中的狀態或塊/通道調度

我：

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

或者，也許我應該用：

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

... 

<button onClick={this.someCoolName}>

哪種方案更好，爲什麼？

據我所知，你有一個變量isBtnEnabled並根據是否爲真，你想要顯示button。如果是這樣，這將是你的情況比較好的辦法：

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

如果你想改變event處理程序你可以做這樣的事情：

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

不過，如果你只是想disable/enable的button退房@RamizWachtler答案

或者你可以這樣做：

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

2017-10-06 12:11:27 Nocebo

爲什麼不使用默認的disabled屬性？這樣

const btnProps = { 
    disabled: !isBtnEnabled 
}; 

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

裏面的onButtonClick

const {doSomething} = this.props; 

doSomething();

哪種解決方案是東西好，爲什麼？

我認爲這取決於您的個人偏好或團隊內部的協議。在我看來，將onClick方法與渲染方法分離起來更簡潔。

2017-10-06 12:11:43

回答