时间戳

首页 > 解决方案 > 未应用反应样式对象

reactjs - 未应用反应样式对象

问题描述

我有以下功能组件

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;

标签： reactjs

解决方案

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

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

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

推荐阅读