如何在Inline Livewire组件全页渲染时修改布局？

我想在访客页面和应用页面中使用Inline Livewire组件，知道Livewire默认使用layout.app，也能修改全页渲染的默认布局。已经实现了常规的blade+PHP文件组件，当前Inline组件直接返回HTML的写法如下：

public function render()
{
    return <<<'HTML'
        <div>
            example page view
        </div>
    HTML;
}

但我想知道，能不能像常规组件那样，在直接返回HTML的代码后链式调用->layout()方法来指定布局？比如类似下面的伪代码写法：

// 常规组件的布局指定写法
public function render()
{
    return view('livewire.show-posts')
        ->layout('layouts.guest');
}

// 我期望的Inline组件写法（伪代码）
public function render()
{
    return <<<'HTML'
        <div>
            example page view
        </div>
    HTML; ->layout('layouts.guest');
}

回答 #

不行，直接返回HTML字符串的话没法链式调用->layout()方法——因为返回的是纯字符串，并非Livewire/View实例，而->layout()是Livewire扩展的View实例专属方法。

要给Inline组件指定布局，你需要把HTML字符串包装成View实例，之后就能调用->layout()方法了，示例代码如下：

public function render()
{
    return view()->make('')
        ->setContent('
            <div>
                example page view
            </div>
        ')
        ->layout('layouts.guest');
}

核心思路就是将你的Inline HTML转换成View对象，这样就能利用Livewire的布局指定功能了。

内容的提问来源于stack exchange，提问作者Jakub