Как использовать React js в шаблоне лезвия
Я хотел бы использовать React js в качестве интерфейса для моего проекта laravel. Итак, я сделал предустановку:
php artisan preset react
Теперь я хотел бы знать, как компонент реакции должен быть реализован в моих представлениях лезвий, чтобы они могли получать доступ к данным, передаваемым в эти представления через контроллеры ...
Например, в моем homeController я передаю некоторые данные:
return views('theview')->with('datas',$datas);
В theview.blade.php я могу получить к ним доступ следующим образом:
{{ $datas }}
но как я могу использовать это для обновления компонента реакции?
как @extends('layouts.app') @section('content') <example-component datas = {{ $datas }}></example-component> @endsection
Ответы 2
Один из способов - передать данные из контроллера laravel в реагирующий компонент.
A React Component взаимодействует с элементом идентификатора представления document.getElementById('example') на вашей странице просмотра laravel.
Ваш Контроллер Laravel нравится.
class HomeController extends Controller
{
public function index(){
$data = [
'john', 'doe'
];
return view('welcome')->with('data', json_encode($data));
}
}
Убедитесь, что вы передаете контроллер данных для просмотра как json. Ваш Blade View
..
<link rel = "stylesheet" href = "css/app.css">
</head>
<body>
<div id = "example" data='{{ $data }}'></div>
<script src = "js/app.js"></script>
</body>
Ваш Пример компонента в reources / assets / js / components / Example.js, например
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
constructor(props){
super(props);
console.info('data from component', JSON.parse(this.props.data));
}
render() {
return (
<div className = "container">
.....
</div>
);
}
}
if (document.getElementById('example')) {
var data = document.getElementById('example').getAttribute('data');
ReactDOM.render(<Example data = {data} />, document.getElementById('example'));
}
Убедитесь, что при изменении кода компонента Example.js вы должны запустить команду npm run dev в командной строке.
но почему данные должны передаваться как json, подскажите пожалуйста?
Потому что атрибут HTML-тега содержит только строку в качестве значения. <div id = "example" data='{{$data}}'></div>
Хорошее объяснение
Было бы лучше обратиться к видео YouTube для этого конкретного примера. youtube.com/watch?v=Un3DbIvqPoA
Вы хотите передать некоторую серверную строку / массив / коллекцию / что угодно в свой JavaScript
В приведенной выше ситуации вы можете использовать пакет PHP-Vars-To-Js-Transformer
этот пакет поддерживается известным сайтом laracasts, поэтому вам не нужно сильно беспокоиться об ошибках и побочных эффектах.
Вот простой пример после успешной установки и загрузки пакета.
use JavaScript; // declare name space.
// Class method
public function index()
{
JavaScript::put([
'foo' => 'bar',
'user' => User::first(),
'age' => 29
]);
return View::make('hello');
}
Используя приведенный выше код, вы теперь сможете получить доступ к foo, user и age из вашего JavaScript.
console.info(foo); // bar
console.info(user); // User Obj
console.info(age); // 29
Для получения дополнительной информации посетите: PHP-Vars-To-Js-Transformer
передача этих данных как свойства компонента реакции.