如何防止某些 x-blade 属性在 html 中呈现？答案

【问题标题】：How to prevent some x-blade attributes being rendered in html?如何防止某些 x-blade 属性在 html 中呈现？
【发布时间】：2022-01-27 00:35:43
【问题描述】：

大家，目前我正在做一些 Laravel 项目，我希望有一个 x-blade 组件，它根据传递给组件的属性来渲染 html，但我不希望属性本身被渲染到html。

组件刀片文件：

@props([
    'variant'=>'red',
    'styles'=>[
        'red'=>'bg-red text-white h-11 px-4 rounded-xl flex justify-center items-center font-bold',
        'white'=>'bg-white border border-red h-11 px-4 rounded-xl flex justify-center items-center font-bold'
    ]
])

<a href="{{$attributes['href']}}" {{$attributes->merge(['class'=>$styles[$variant]])}}>
    {{$slot}}
    @if($attributes['external'])
        <div class="w-4 xl:w-5 4xl:w-6 ml-3 sm:ml-4">
            I'm external
        </div>
    @endif
</a>

我的组件：

<x-test href="#" class="w-max" variant="white" external>
    Button text
</x-test>

呈现的 html：

<a href="#" class="bg-white border border-red h-11 sm:h-12 xl:h-13 4xl:h-14 px-4 sm:px-7 xl:px-8 4xl:px-9 rounded-xl flex justify-center items-center font-bold w-max" external="external">
    Button text
    <div class="w-4 xl:w-5 4xl:w-6 ml-3 sm:ml-4">
        I'm external
    </div>
</a>

如您所见，<a> 标记正在使用 external="external" 属性呈现，我想阻止这种情况。

非常感谢您的时间和精力！！！ :)

【问题讨论】：

标签： php html laravel laravel-blade

【解决方案1】：

只需在 props 中声明 $external 以防止这种情况发生并像普通变量一样使用它

  @props([
      ...
      'external'=false
])

<a {{ $attributes }} {{$attributes->merge(['class'=>$styles[$variant]])}}>
    {{$slot}}
    @if($external)
        <div class="w-4 xl:w-5 4xl:w-6 ml-3 sm:ml-4">
            I'm external
        </div>
    @endif
</a>

【讨论】：

这似乎不起作用，值被设置为 false 并且条件部分未呈现
按钮文本
当你想使用组件时，在刀片中切换 true/false

【解决方案2】：

或者试试这个：

 $attributes->merge(['class'=>$styles[$variant]])->except('external')

【讨论】：

我在阅读文档时错过了这一点......完美！谢谢！！！
@AurimasKuniutis 如果这回答了你的问题，你应该这样标记它。如果你这样做，它也会帮助其他人。