这里是新手,这是我的第一个stackoverflow问题,如果这是一个格式不正确的问题,我们深表歉意。
我正在React中工作,并使用用户定义的输入生成SVG。我正在尝试将用户单位定义为mm而不是默认的px,但似乎找不到使用props作为高度/宽度值并同时设置单位的正确语法。我目前有一些由props设置的width / height值,如果我给出一个固定值(例如15mm),我可以成功定义单位,但是我不能同时做这两个事情。
// 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>
答案 0 :(得分:1)
我怀疑,我最初的问题只是缺乏语法方面的经验。通过使用模板文字将变量和单位指示符连接起来,我能够将props旁边的单位定义为值。
// 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>
谢谢你的帮助,约翰。