Как установить пользовательские единицы SVG, если значения высоты / ширины являются React props?

Question

Новичок здесь, и это мой первый вопрос о переполнении стека, поэтому прошу прощения, если это плохо сформированный вопрос.

Я работаю в React и создаю SVG с пользовательскими входами.Я пытаюсь определить пользовательские единицы как мм вместо пикселей по умолчанию, но я не могу найти правильный синтаксис для использования реквизита в качестве значения высоты / ширины И установки единиц одновременно.В настоящее время у меня есть значения ширины / высоты, установленные реквизитом, и я могу успешно определить единицы измерения, если я задаю фиксированное значение (например, 15 мм), но я не могу сделать оба одновременно.

// app.js

...

state = {
   svgWidth: 200,
   svgHeight: 200,
};

handleChange = (e) => {
   const name = e.target.id;
   const value = parseFloat(e.target.value
   this.setState({ [name]: value });
};

...

<Inputs
   {...this.state}
   handleChange={this.handleChange}
/>

<SVG
  {...this.state}
/>

//inputs.js

...

<TextField
   id="svgWidth"
   value={props.svgWidth}
   onChange={handleChange}
/>

<TextField
   id="svgHeight"
   value={props.svgHeight}
   onChange={handleChange}
/>


// svg.js

...

<svg width={props.svgWidth} height={props.svgHeight}>
   ...
</svg>

Answer 1

Как я и подозревал, моим первоначальным вопросом было просто отсутствие опыта работы с синтаксисом.Я смог определить единицы измерения вместе с реквизитом в качестве значения, используя литералы шаблона для объединения переменной и индикатора единиц измерения.

// svg.js

...

<svg 
   width={`${props.svgWidth}mm`}
   height={`${props.svgHeight}mm`}
>
   ...
</svg>

Однако, чтобы связать пользовательские единицы svg с определенными единицами «реального мира»на верхнем уровне элемента svg мне нужно было определить svg viewBox, чтобы они были такими же размерами.

// svg.js

...

<svg
   width={`${props.svgWidth}mm`}
   height={`${props.svgHeight}mm`}
   viewBox={`0 0 ${props.svgWidth} ${props.svgHeight}`}
>
   ...
</svg>

Спасибо за помощь, Джон.