javascript - ES6 模板文字：如何添加条件多行并删除额外的缩进？

Question

我需要基于一些有条件地在 ES6 模板文字中添加多行conditions，并在每一行上删除额外的缩进。

代码：

const reactComponentJSX = `
  ${condition1? '<Menu/>' : ''}
  ${condition2? '<p>Welcome to my app</p>' : ''}
  ${condition3? '<Body/>' : ''}
  ${condition4? '<h1>Good bye</h1>' : ''}
`;

实际输出：

让我们假设条件 1 和条件 4 为假，因此将打印以下 JSX。

// unnecessary new line
// unnecessary new line
  <p>Welcome to my app</p>
// unnecessary new line
  <h1>Good bye</h1>

注意每个非空行中不必要的缩进。

预期输出：

显示没有缩进的行，并且不打印错误条件的新行。

<p>Welcome to my app</p>
<h1>Good bye</h1>

注意：我正在为JSX文件编写模板。所以，你可以将问题陈述视为在render函数中条件写入JSX标签，在JSX文件中条件导入库等

标签： javascriptnode.jsreactjstypescriptecmascript-6

Answer 1

// dummy conditions and texts
const conditions = (new Array(10)).fill().map(() => Math.random() < 0.5);
const components = (new Array(10)).fill().map((_,i) => `<Component${i}/>`);

// create your content with map and join
const content = conditions
  .map((condition, i) => condition ? components[i]+'\n' : null)
  .filter(template => template !== null)
  .join('')
console.log(content);