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

Question

我需要将我的代码从主干 View 迁移到 react View 。

我在主干 View 中使用 Handlebars 模板，我需要将其放入 React 组件的 render 方法中。

有人可以建议如何将这两个实用方法移至 JSX

1. 与

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

2. 除非

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

Answer 1

如果表达式返回假值，unless block 内的所有内容都将被渲染。

将其替换为以下 jsx 代码:

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

通常，Handlebars 模板是根据传递到编译方法中的上下文进行评估的。 with 辅助方法用于转移模板部分的上下文。

借用您的示例，如果您的 props 包含值 abc.def.firstName 和 abc.def.lastName，您可以在 {{with abc.def}} block 中使用firstName和lastName。

您的 with block 示例中没有使用任何变量。这就是为什么我对您的示例进行了一些修改，以展示如何在 jsx 表达式中使用缩写的 paymentDescription。假设 paymentDescription 最初深埋在 props.abd.def 内部。然后你可以编写以下jsx代码:

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

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