JSX if утверждение в шаблонном литерале

Question

Я рендеринг следующего HTML с JSX

<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 .

Может быть, я могу ошибаться - но вы пытаетесь создать строковый объект?

Если это так, вы можете просто сделать это как , условно создавая литерал объекта , а затем просто преобразовать его в строку:

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}
      }`;