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

回答

相關問題