模板文字中的 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 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))

Answer 2

我认为这应该可行。请试一试

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