当只有一个根元素时，在 Livewire 中出现"Multiple root elements detected."错误

Question

我正在尝试创建一种方法来动态加载Livewire嵌套组件，通过有一个主容器组件，像这样:

ComponentContainer.php

class ComponentContainer extends Component
{
public $component = 'active';
protected $listeners = [
'switch'
];
public function switch(string $component)
{
$this->component = $component;
}
public function render()
{
return view('livewire.component-container', [
'component' => $this->component,
'key' => random_int(PHP_INT_MIN, PHP_INT_MAX),
]);
}
}

component-container.blade.php

<div>
<h1>Component Container</h1>
@livewire($component, key($key))
<button wire:click="$emit('switch', 'active')">
{{ __('Active') }}
</button>
<button wire:click="$emit('switch', 'expired')">
{{ __('Expired') }}
</button>
</div>

当我点击"active"或";expired"它正在加载以下组件之一:

Active.php

class Active extends Component
{
public function render()
{
return view('livewire.active');
}
}

active.blade.php

<div>
active
</div>

Expired.php

class Expired extends Component
{
public function render()
{
return view('livewire.expired');
}
}

expired.blade.php

<div>
expired
</div>

但是我在控制台日志中得到以下错误，我不明白为什么:

Livewire:检测到多个根元素。这是不支持的。更多信息请参见文档https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-issues

expired

似乎没有意义，因为它显然只是一个根元素。有趣的是，不管我把$component设置为active还是expired，它在第一次加载时都不会这样做

Answer 1

错误是由最后的HTML注释(wire:end)丢失引起的。出于某种原因，只有当按钮放置在动态组件调用....

之后时才会发生这种情况。显示"检测到的多个根元素"。误差

<div>
<h1>Component Container</h1>
@livewire($component, key($key))
<button wire:click="$emit('switch', 'active')">
{{ __('Active') }}
</button>
<button wire:click="$emit('switch', 'expired')">
{{ __('Expired') }}
</button>
</div>

但这工作得很好…

<div>
<h1>Component Container</h1>
<button wire:click="$emit('switch', 'active')">
{{ __('Active') }}
</button>
<button wire:click="$emit('switch', 'expired')">
{{ __('Expired') }}
</button>
@livewire($component, key($key))
</div>

我不确定这是预期的行为还是一个错误，但这修复了所描述的问题。