有条件地渲染反应组件

Question

我一辈子都想不通为什么我的 73 个单元测试中只有一个失败了

            sendToSwiftAction = (
                <Button
                    text={buttonText}
                    buttonType="primary"
                    onClick={this.toggleModal}
                    disabled={
                        !canSendToSwift || swiftCommitEnabled
                            ? sendToSwiftStatus !== 'NOT_SENT'
                            : sendToSwiftStatus === 'COMPLETED'
                    }

似乎 !canSendToSwift 在我的单元测试中以某种方式返回为 false

        const btn = render(null, { permissions: [] }).find('Button');

        expect(btn.prop('disabled')).toBeTruthy();
    });

测试通过就好了，直到我添加了切换 swiftCommitEnabled？ 真流：假流逻辑。 只是.canSendToSwift || sendToSwiftStatus?== 'NOT_SENT' 当它通过时。 我错过了一些简单的东西吗？ 提前感谢您提供的任何帮助。

Answer 1

Javascript 将首先评估二进制表达式（ || ）然后是三进制（ ?: ）。 您的代码如下所示：

const condition = !canSendToSwift || swiftCommitEnabled
const disabled = condition
  ? sendToSwiftStatus !== 'NOT_SENT'
  : sendToSwiftStatus === 'COMPLETED'

或者，如果在纯二进制逻辑操作中更容易理解：

const condition = !canSendToSwift || swiftCommitEnabled
const case1 = sendToSwiftStatus !== 'NOT_SENT'
const case2 = sendToSwiftStatus === 'COMPLETED'
const disabled = (condition && case1) || (!condition && case2)