如何將模板從手柄移植到React的JSX

我在骨幹視圖中使用了Handlebars模板，我需要將它放在React組件的render方法中。

有人建議如何將這兩個實用方法移到JSX

與

<div> 
    {{#with paymentDescription}} 
    <div class="test"> 
     <p>some text</p> 
    </div> 
    {{/with}} 
</div>

除非

<div class="name"> 
    {{ abc.def.firstName }} {{ abc.def.lastName }} 
    {{#unless quote.def}} 
    &nbsp; 
    {{/unless}} 
</div>

來源

2017-07-09 Bailey

將代碼作爲格式化文本而不是圖像！我爲你編輯過。至於這個問題，你不需要那些助手。只需在組件內引用帶有內聯JSX表達式的變量即可。瀏覽React文檔。 – Li357

我最初嘗試使用格式化文本，但它並沒有以正確的方式出現。它被認爲是一個HTML標籤。（我可能在那裏做錯了）關於問題：如果你能提供上面的片段的精確的JSX等價物（至少第一個），那將是非常好的。上面第一個內聯JSX表達式是什麼。根據反應文檔，類將轉換爲className，但不知道handlebar helper方法（主要是上面兩個） – Bailey

一切unless塊內將在表達式返回虛假值時呈現。

用下面JSX代碼替換它：

let unless_block = ""; 
if (!props.quote.def) { unless_block = "&nbsp;" } 
return (
    <div className="name"> 
    { props.abc.def.firstName } { props.abc.def.lastName } 
    {unless_block} 
    </div> 
);

通常，把手模板針對傳遞到編譯方法的上下文中進行評價。 with輔助方法用於移動模板部分的上下文。

借用你的例子，如果你的道具包含值abc.def.firstName和abc.def.lastName，你可以在{{with abc.def}}塊中使用firstName和lastName。

在with塊的示例中沒有使用變量。這就是爲什麼我修改了一下你的例子來說明如何在jsx表達式中使用縮寫paymentDescription。假設付款說明最初被埋在props.abd.def內部。然後您可以編寫以下jsx代碼：

let paymentDescription = props.abc.def.paymentDescription; //shift the context 

return (
    <div> 
    <div className="test"> 
    {paymentDescription} 
    </div> 
    </div> 
);

來源

2017-07-09 07:06:17 snwclone

如何將模板從手柄移植到React的JSX

回答

相關問題