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

soat7uwm 于 2023-04-12 发布在其他

关注(0)|答案(2)|浏览(84)

我有两种方法。
我可以：

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

或者我应该用途：

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

...

<button onClick={this.someCoolName}>

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

2条答案

为什么不使用默认的disabled属性呢？

const btnProps = {
    disabled: !isBtnEnabled
};

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

onButtonClick内部

const {doSomething} = this.props;

doSomething();

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

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