变量存在且为真时的刀片条件渲染

Question

当参数设置为 true 时，我想有条件地向刀片组件添加一个属性和一个类。 当参数未设置时，我希望它被评估为假。

条件如下：

• 如果参数（已定义并）设置为 true，则呈现该类
• 如果参数为 false或 undefined ，则不呈现类

看法：

@include('my-component', ['disabled' => true])
@include('my-component') /* implicitly: disabled = false */

成分：

<button
    {{ $disabled ? 'disabled' : ''}}
    class="{{ $disabled ? 'Button--disabled' : ''}}"
>
Button
</button>

此代码抛出一个Undefined variable: disabled在参数未明确设置为 false（未定义）的情况下Undefined variable: disabled 。 我设法使其工作的唯一方法是将 disabled 参数设置为 false，如下所示：

@include('my-component', ['disabled' => false]) 

出于可读性和维护的原因，我想省略这个disabled => false ，因为这是默认状态。

应该如何更改组件代码，以便在视图中保持相同的语法？

Answer 1

Blade 组件可以接受 props 然后可以根据 props 类添加

对于匿名组件

@props(['disabled' => false])
<button 
    {{
        $atttributes->merge([
            'disabled' => $disabled,
            'class' => $disabled ? 'Button--disabled' : ''
        ])
    }}
>
    {{ $slot }}
</button>