根据您的问题：

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)

...但是您要解决什么问题？

我想我们这里有XY Problem。

也许我可能是错的-但是您正在尝试创建一个字符串对象？

如果是这样，您可以简单地以conditionally creating an object literal的形式进行操作，然后将其字符串化：

const data = {
  ...true ? { key: 'value' } : {},
  key1: 'value',
  ...false ? { key2: 'value2' } : {}
}

console.log(JSON.stringify(data))

模板文字中的JSX if语句

2 个答案:

根据您的问题：

...但是您要解决什么问题？