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

Question

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

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

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

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

Answer 1

Если вы используете функции ES2015, подходящими могут быть строки шаблона, например:

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

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

Answer 2

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

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