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

pod7payv 于 2022-12-18 发布在 React

关注(0)|答案(1)|浏览(126)

我如何从运行时数据中指定div的位置？我是否应该使用一些钩子来设置类名字符串？我发现很多时候是异步问题导致了这类问题。
无论如何，我希望有人能给我指出正确的方向，有可能我想做的事情甚至没有顺风的支持：

{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中的stringOffset来复制显示在div中的文本，并删除className的组成，仅使其成为具有运行时数据的静态字符串，复制并粘贴它设置的正确位置。

reactjs

来源：https://stackoverflow.com/questions/74818142/using-arbitrary-runtime-strings-for-tailwind-css-class-positioning

1条答案

按热度按时间

xt0899hw1#

Tailwind不是在渲染时动态构建的，如果你在编译之前就知道它的值，你可以包含它，或者使用类似cx的东西来附加一个className，但是在这种情况下你必须设计样式，你可能需要稍微使用一下style属性：

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>
    )
}

赞(0）回复(0）举报 2022-12-18

我来回答

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

1条答案

相关问题

热门标签

最新问答