Интерполяция переменных в строку

Question

Хотя опытный программист я совершенно новичок в js и реагирую.

Я пытаюсь использовать компонент react-native-svgPath в пределах моего собственного компонента. В этом примере все ясно, но для координат используется строковый литерал. Например:

<Path d="M 10 20 L 30 40" stroke="red" /> 

Однако я хочу использовать координаты из реквизита моего компонента x1, y2, x2, y2 вместо литералов, но я не могу понять, как посадить их в кавычки строки вместе с различными персонажами примеры M и L.

Answer 1

При использовании функции ES2015, template strings бы возможный подход, например .:

<Path 
    d={`M ${this.props.x1} ${this.props.y1} L ${this.props.x2} ${this.props.y2}`} 
    stroke="red" 
/> 

Примечание кавычки вместо кавычек.

Answer 2

Это похоже на аналогичный question, который у меня был. Вы можете передать массив элементов и присоединиться к ним, чтобы создать свою строку.

<Path d={['M', x1, y1, 'L', x2, y2].join(' ')} stroke="red" />