Question

我需要从骨干视图迁移我的代码以反应视图。

我在骨干视图中使用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>

Answer 1

如果表达式返回一个假值，将呈现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>
);

通常，Handlebars模板将根据传递给已编译方法的上下文进行评估。 with辅助方法用于移动模板的一部分的上下文。

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

在with块的示例中没有使用变量。这就是为什么我修改你的例子以显示如何在jsx表达式中使用缩写的paymentDescription。假设paymentDescription最初埋藏在props.abd.def内。然后你可以写下面的jsx代码：

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

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

如何将模板从Handlebar迁移到React的JSX

1 个答案: