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

我正在使用和反应和Laravel。ReactJS - 将参数从刀片传递到JSX

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

我的看法是这样的：

<?php 
    echo $max_price; 
?> 

@extends('layouts.master') 


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

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

这使得pageComponent

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

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

来源

2017-08-28 fractal5

您可以使用window对象从叶片数据分享给JS的JSX文件：

<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到一些辅助方法：

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

，然后在JSX：

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

来源

2017-08-28 18:41:05

由于这是工作。有没有更好或更喜欢这样做的方式，而不是在窗口中传递变量？在之前的项目中，我使用过这样的东西：在控制器中，返回视图（'stocks'） - >（'MAX_PRICE'，“900”）; 而在js组件中我可以直接使用MAX_PRICE。但它在这里不起作用。 – fractal5

你可以使用localStorage而不是窗口对象。将非关键值保存到localStorage并从中读取也可以同时工作。 – bennygenel

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

回答

相关问题