使用任意运行时字符串进行 Tailwind CSS 类定位

发布于12月16日

如何根据运行时数据指定div的位置？我应该使用一些钩子来设置类名称字符串吗？我发现很多时候是异步问题导致了这种问题.

无论如何，我希望有人能给我指引正确的方向，可能我想做的事情甚至没有tailwind 的支持:

{timeRecord.clockedTimes.map((time, index) => {
         let date = new Date(time.start);
         let topOffset = getTopOffset(date).toFixed(4);
         let stringOffset = `top-[${topOffset}%]`;
         let className = "absolute " +stringOffset+" outline outline-red-400 w-1/2 left-1/2";
                
                
         return (
                  <div className={className} >
                     {stringOffset}
                  </div>
         )
})}

如果我复制显示在div中的文本，方法是从div中呈现字符串Offset，并删除类名称的组成，使其成为带有运行时数据副本的静态字符串，并粘贴它.

推荐答案

tailwind 不是在渲染时动态构建的.如果您在编译之前知道值是什么，您可以包括它，或者我们使用类似cx的值来附加一个类名称，但在这种情况下，您必须设置样式，您可能需要使用styleprops :

interface getTopOffsetProps {
    timeDate: Date
}

const getTopOffset = ({ timeDate }: getTopOffsetProps) => {
    return timeDate
}

interface ClockedTimes {
    time: string
}

const ChildComponent = ({ time }: ClockedTimes) => {
    const date = new Date(time)
    const stringOffsetStyle = `${getTopOffset({ timeDate: date })}`

    return (
        <div className="absolute outline outline-red-400 w-1/2 left-1/2" style={{ top: stringOffsetStyle }}>
            {stringOffset}
        </div>
    )
}

interface ParentComponentProps {
    timeRecord: string[]
}

const ParentComponent = ({ timeRecord }: ParentComponentProps) => {
    return (
        <div>

            {timeRecord.map((time, index) => {
                <ChildComponent time={time} />
            })
        </div>
    )
}