Question

我正在使用 React 和 Laravel 。

我可以将值从控制器传递到刀片视图。但是如何将此值从视图传递到 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对象将数据从刀片共享到js：

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

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

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

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

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

然后在jsx：

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

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

1 个答案: