javascript - ReactJS - 将参数从 Blade 传递给 JSX

Question

我正在使用 React 和 Laravel。

我能够将值从我的 Controller 传递到 Blade View 。但是我怎样才能将这个值从 View 传递到 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'));