reactjs - Używanie dowolnych łańcuchów wykonawczych do pozycjonowania klas Tailwind CSS

Jak mogę określić pozycję elementu div na podstawie danych w czasie wykonywania? Czy powinienem użyć jakiegoś hooka, aby ustawić ciąg className? Często okazuje się, że tego rodzaju problemy powodowane są przez kwestie asynchroniczne.

Tak czy inaczej, miałem nadzieję, że ktoś mógłby mnie skierować we właściwym kierunku, możliwe, że to, co chcę zrobić, nie jest nawet wspierane przez 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>
         )
})}

Jeśli skopiuję tekst wyświetlany wewnątrz div, renderując stringOffset z wnętrza div i usunę kompozycję className, a po prostu zrobię z niego statyczny ciąg z danymi uruchomieniowymi, skopiowanymi i wklejonymi, ustawia on właściwą pozycję.

Odpowiedź #1

Tailwind nie jest budowany dynamicznie podczas renderowania. Jeśli wiesz, jaka jest wartość przed kompilacją, możesz ją uwzględnić lub użyć czegoś takiego jak cx, aby dołączyć className, ale w tym przypadku będziesz musiał stylizować, może będziesz musiał trochę pobawić się właściwością 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>
    )
}