在Laravel5.5中部分引入类似Vue.js风格的React.js

2 年 ago

逸, 科

1 minute

背景

直接翻译这个标题

引进

$ composer create-project --prefer-dist laravel/laravel react-laravel "5.5"
$ cd react-laravel
$ php artisan preset react
$ npm install && npm run dev

在这里进行编译，并且可以显示出示例。

将变量从Laravel传递到React.js。

.
.
.
    <body>
        <div class="flex-center position-ref full-height">
            <div id="example" title="title"></div>
        </div>

        <script src="{{ asset('js/app.js')}}"></script>
    </body>

import React from 'react';
import { render } from 'react-dom';

const Example = ({ title }) => (
    <div className="container">
        <div className="row">
            <div className="col-md-8 col-md-offset-2">
                <div className="panel panel-default">
                    <div className="panel-heading">Example Component</div>

                    <div className="panel-body">
                        {title}
                    </div>
                </div>
            </div>
        </div>
    </div>
);


const Element = document.getElementById('example');
if (Element) {
    const title = Element.getAttribute('title');
    render(<Example title={title} />, document.getElementById('example'));
}

立即进行编译和屏幕显示

$ npm run dev
$ php artisan serve

仅需要一种选择：请为下述内容进行汉语本地化的改写：

参考

试着将Laravel Blade中的验证错误消息传递到React组件（Material UI）中。