在 Next.JS 中动态对齐文本？

Question

所以我尝试根据用户输入动态对齐文本。 例如：用户在模式按钮上按 8:00 -> 左对齐事件标题 用户按下 8:30-> 右对齐事件标题

我知道顺风不是为动态改变样式而设计的，但我对其他样式方法相当缺乏经验（我是一个热情的新手）有人对我应该如何解决这个问题有任何想法吗？

我现在拥有的

应处理更改的函数：

function handleLeftAlign() {
    alignEvent("align-left");
  }

  function handleRightAlign() {
    alignEvent("align-right");
  }

  function alignEvent(alignClass: string) {
    // Update the class for the event with the specified ID (idToAlign)
    setAllEvents((prevEvents) =>
      prevEvents.map((event) =>
        Number(event.id) === Number(idToAlign)
          ? { ...event, alignClass: alignClass }
          : event
      )
    );

    // Close the alignment modal and reset the ID
    setShowAlignModal(false);
    setIdToAlign(null);
  }

我在哪里创建事件及其各自的样式（当前不起作用）：

{events.map((event) => (
              <div
                 className={`fc-event border-2 p-1 m-2 w-full rounded-md ml-auto text-center bg-white ${events.title.alignClass}`}>
                title={event.title}
                key={event.id}
              >
                {event.title}
              </div>

用户按下的按钮：

<div className="bg-gray-50 px-4 py-3 sm:flex sm:px-6">
                      <button
                        type="button"
                        className="ml-4 inline-flex justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white 
    shadow-sm hover:bg-blue-500 sm:ml-0 sm:w-auto"
                        onClick={handleLeftAlign}
                      >
                        8:00 AM
                      </button>

                      <button
                        type="button"
                        className="ml-8 inline-flex justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white 
    shadow-sm hover:bg-blue-500 sm:ml-2 sm:w-auto"
                        onClick={handleRightAlign}
                      >
                        8:30 AM
                      </button>

Answer 1

不确定，但可能存在问题，因为您尝试访问 events.title.alignClass 而不是 event.alignClass。

试试这个代码：-

{events.map((event) => (
  <div
    className={`fc-event border-2 p-1 m-2 w-full rounded-md ml-auto text-center bg-white ${event.alignClass}`}
    title={event.title}
    key={event.id}
  >
    {event.title}
  </div>
))}