Метод render

Метод render класса Component используется для рендеринга представления компонента. Он автоматически вызывается системой при выводе компонента в шаблоне. Метод должен возвращать экземпляр класса View или строку с HTML-кодом. Внутри метода можно подготавливать данные для представления и вызывать другие методы компонента.

Синтаксис

<?php
	namespace AppViewComponents;
	
	use IlluminateViewComponent;
	
	class MyComponent extends Component
	{
		public function render()
		{
			return view('components.my-component');
		}
	}
?>

Пример

Давайте создадим компонент, который принимает массив статей и выводит их список:

<?php
	namespace AppViewComponents;
	
	use IlluminateViewComponent;
	
	class ArticleList extends Component
	{
		public $articles;
		
		public function __construct($articles)
		{
			$this->articles = $articles;
		}
		
		public function render()
		{
			return view('components.article-list', [
				'articles' => $this->articles
			]);
		}
	}
?>

Представление компонента:

<ul>
	@foreach ($articles as $article)
		<li>{{ $article }}</li>
	@endforeach
</ul>

Использование компонента в шаблоне:

<x-article-list :articles="['article 1', 'article 2', 'article 3']" />

Результат выполнения кода:

<ul>
	<li>article 1</li>
	<li>article 2</li>
	<li>article 3</li>
</ul>

Пример

Метод render может возвращать строку напрямую, без использования представления:

<?php
	namespace AppViewComponents;
	
	use IlluminateViewComponent;
	
	class SimpleComponent extends Component
	{
		public $message;
		
		public function __construct($message)
		{
			$this->message = $message;
		}
		
		public function render()
		{
			return "<div>" . $this->message . "</div>";
		}
	}
?>

Использование компонента:

<x-simple-component message="Hello World" />

Результат выполнения кода:

<div>Hello World</div>

Пример

В методе render можно выполнять дополнительные проверки и изменять данные перед рендерингом:

<?php
	namespace AppViewComponents;
	
	use IlluminateViewComponent;
	use AppModelsUser;
	
	class UserProfile extends Component
	{
		public $userId;
		public $user;
		
		public function __construct($userId)
		{
			$this->userId = $userId;
		}
		
		public function render()
		{
			$this->user = User::find($this->userId);
			
			if (!$this->user) {
				return "<p>User not found</p>";
			}
			
			return view('components.user-profile', [
				'user' => $this->user
			]);
		}
	}
?>

Представление компонента:

<div>
	<h2>{{ $user->name }}</h2>
	<p>Email: {{ $user->email }}</p>
</div>

Использование компонента:

<x-user-profile :userId="1" />

Смотрите также

метод shouldRender,
который определяет должен ли компонент рендериться
класс View,
который отвечает за создание представлений
метод attributes,
который позволяет работать с атрибутами компонента
метод slot,
который используется для передачи контента в слоты компонента