未应用的对象

Question

我有以下功能组件

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;

Answer 1

翻译需要单位，Translate（0,1） 不是有效的样式。你想用什么单位？

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

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