ReactJS

Question

我正在使用 React 和 Laravel.

我能够将值从我的控制器传递到 blade 视图。但是我怎样才能将这个值从视图传递到 JSX.

我的观点是这样的：

<?php
    echo $max_price;
?>

@extends('layouts.master')


@section('content')
    <div id="stocks"></div>
@endsection

我可以在这里访问 max_price。但是如何将它传递给 JSX 文件。

呈现 pageComponent 的 JSX 文件

var React = require('react');
var ReactDOM = require('react-dom');
var PageComponent  = require('./PageComponent');

if (document.getElementById('stocks')) {
    ReactDOM.render(<PageComponent  />,document.getElementById('stocks'));
}

Answer 1

您可以使用 window 对象将数据从 blade 共享到 js:

<script type="text/javascript">
    window.maxPrice= {!! json_encode($max_price) !!};
</script>

然后您可以在 jsx 文件中使用 window.maxPrice：

ReactDOM.render(<PageComponent maxPrice={window.maxPrice} />, 
  document.getElementById('stocks'));

但是，我不建议直接从 jsx 访问 window 变量。相反，您可以将访问 window 包装到一些辅助方法中：

export function getMaxPrice() {
  return window.maxPrice;
}

然后在 jsx 中：

ReactDOM.render(<PageComponent maxPrice={getMaxPrice()} />, 
  document.getElementById('stocks'));

ReactJS - 将参数从 blade 传递给 JSX

ReactJS - Pass parameter from blade to JSX

javascript

php

laravel

blade