模板文字中的JSX if语句

Question

我用JSX呈现以下HTML

<div data-things="{"somethingOne": 1, "somethingTwo": 22, "somethingThree": 'some string'}">
</div>

在JSX中，我有

const data = `{
  "somethingOne": ${valueOne}, 
  "somethingTwo": ${valueTwo}, 
  "somethingThree": ${valueThree}
}`;

并返回

<div data-things={ data }><div>

这很好，但现在我尝试在模板文字中添加条件，以仅在值存在时显示属性值对。

我尝试了许多变体，包括：

const data = `{
  "somethingOne": ${valueOne}, 
  ${valueTwo} && "somethingTwo": ${valueTwo},
  "somethingThree": ${valueThree}
}`;

条件呈现：

22 && "initialSlide": 22,

它显示值，但返回条件语句语法，而不是对其进行处理。

我怎样才能使这个条件起作用？我必须为每一个添加条件。

Answer 1

我认为这应该行得通。请试一试

     const two = valueTwo ? `"somethingTwo": ${valueTwo},`:"";
     const data = `{
         "somethingOne": ${valueOne}, 
         ${two}
         "somethingThree": ${valueThree}
      }`;

Answer 2

您可以使用占位符（${}）中的三元运算符执行此操作，如下所示：

const data = `{
  "somethingOne": ${valueOne}, 
  ${ valueTwo ? `"somethingTwo:" ${valueTwo},`: '' }
  "somethingThree": ${valueThree}
}`;

伪代码示例：

const data = `{
  ${ true ? '"key": "value",' : '' }
  "key1": "value1",
  ${ false ? '"key2": "value2",' : '' }
}`


console.log(data)