未应用反应样式对象答案

【问题标题】：React styles object not being applied未应用反应样式对象
【发布时间】：2020-09-12 10:04:30
【问题描述】：

我有以下功能组件

import React from 'react';

function Note({x,y,val}) {

    return (
        <React.Fragment>
            <span className="note" style={{transform: `translate(${x},${y})`}}>{val}</span>
        </React.Fragment>
    )
}

export default Note;

由于某种原因，我的内联样式 style={{transform: `translate(${x},${y})`}} 没有被应用（我的 note 类正在被应用）。谁能弄清楚这是为什么？

我尝试在下面的组件中渲染 Note 组件

import React from 'react';
import './Wrapper.css';
import Note from '../Note/Note';

function Wrapper() {
return (
    <div>
    <div id='0' className='wrapper'>
        <div className='string'></div>
        <div className='string'></div>
        <div className='string'></div>
        <div className='string'></div>
        <div className='string'></div>
        <div className='string'></div>
        <Note x={0} y={1} val={'f'} />
    </div>
    </div>
);
}

export default Wrapper;

【问题讨论】：

Translate 需要单位，translate(0, 1); 不是有效的样式。你想使用什么单位？
是的，您缺少单位。
@RossAllen 我会将其添加为答案。
你是对的！完全忘记了这一点。我需要使用百分比。

标签： reactjs

【解决方案1】：

Translate 需要单位，translate(0, 1); 不是有效的样式。你想使用什么单位？

添加百分比之类的内容以获得有效的样式：

<span className="note" style={{transform: `translate(${x}%, ${y}%)`}}>{val}</span>

【讨论】：