Добавление переменной в строку JSX

Question

Я возвращаю следующий HTML в React.

<div 
    className={ props.className } 
    data-slide='{"arrows": true, "slidesToShow": 3, "slidesToScroll": 1}'>
</div>

Возвращает следующее, что нормально

<div class="some-class" data-slide="{"arrows": true, "slidesToShow": 3, "slidesToScroll": 1}"></div>

Однако я хочу, чтобы значение для arrows былопеременная с именем arrowsVal, которую я устанавливаю в своем компоненте React.

Я пытался:

<div 
    className={ props.className } 
    data-slide='{"arrows":' + arrowsVal + ', "slidesToShow": 3, "slidesToScroll": 1}'>
</div>

и

<div 
  className={ props.className } 
  data-slide='{"arrows": `${arrowsVal}`, "slidesToShow": 3, "slidesToScroll": 1}'>
</div>

, но это не работает.

Answer 1

Попробуйте что-то вроде:

<div
  className={props.className}
  data-slide={{ arrows: arrowsVal, slidesToShow: 3, slidesToScroll: 1 }}
/>

Answer 2

<div 
  className={ props.className } 
  data-slide={{
    arrows: arrowsVal,
    slidesToShow: 3,
    slidesToScroll: 1,
  }}
/>

если вам нужен слайд данных, чтобы он все равно был строкой

<div 
  className={ props.className } 
  data-slide={`{"arrows": ${arrowsVal}, "slidesToShow": 3, "slidesToScroll": 1}`}
/>

Answer 3

Это должно работать, я думаю

<div 
  className={ props.className } 
  data-slide={`{"arrows": ${arrowsVal}, "slidesToShow": 3, "slidesToScroll": 1}`}>
</div>

Однако подход, который я бы порекомендовал, заключается в определении const перед оператором возврата метода Render, определенного как:

const dataSlide = `{"arrows": ${arrowsVal}, "slidesToShow": 3, "slidesToScroll": 1}`

и отобразить его как:

<div 
  className={ props.className } 
  data-slide={dataSlide}>
</div>

Надеюсь, это поможет:)