reactjs - 渲染组件依赖于函数中的状态或块/传递调度

Question

我有两种方法。

我可以：

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

或者也许我应该使用：

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

...

<button onClick={this.someCoolName}>

哪种解决方案更好，为什么？

score 0 · Accepted Answer

据我了解，您有一个变量isBtnEnabled，并且取决于它是否为真，您是否想要显示button. 如果是这样，这将是您的情况下更好的方法：

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

如果您想更改event处理程序，您可以执行以下操作：

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

但是，如果您只想disable/查看@RamizWachtlerenable答案button

或者你可以这样做：

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

score 0 · Accepted Answer

为什么不使用默认disabled属性？像这样的东西

const btnProps = {
    disabled: !isBtnEnabled
};

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

在 - 的里面onButtonClick

const {doSomething} = this.props;

doSomething();

哪种解决方案更好，为什么？

我认为这取决于您的个人喜好或团队内部的协议。在我看来，将 onClick 方法与 render 方法分开会更干净。

2 回答 2