ReactJS - 将参数从刀片传递到 JSX答案

【问题标题】：ReactJS - Pass parameter from blade to JSXReactJS - 将参数从刀片传递到 JSX
【发布时间】：2018-02-06 00:46:46
【问题描述】：

我正在使用 React 和 Laravel。

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

我的观点是这样的：

<?php
    echo $max_price;
?>

@extends('layouts.master')


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

我可以在这里访问 max_price。但是我怎样才能将它传递给 JSX 文件。

渲染页面组件的 JSX 文件

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

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

【问题讨论】：

标签： javascript php laravel reactjs blade

【解决方案1】：

您可以使用window 对象从刀片共享数据到 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'));

【讨论】：

谢谢这工作。是否有更好或更首选的方法来执行此操作，而不是在窗口中传递变量？在以前的项目中，我使用过这样的东西：在控制器中，return view('stocks')->with('MAX_PRICE', "900");在 js 组件中，我可以直接使用 MAX_PRICE。但在这里不起作用。
你可以使用 localStorage I 东西而不是 window 对象。将非关键值保存到 localStorage 并从中读取也可以双向工作。