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

Question

我有两种方法。

我可以：

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

或者我应该使用：

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

...

<button onClick={this.someCoolName}>

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

Answer 1

据我了解，你有一个变量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}/>

Answer 2

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

const btnProps = {
    disabled: !isBtnEnabled
};

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

在onButtonClick

内

const {doSomething} = this.props;

doSomething();

  

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

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