我正在使用React和Next.js创建一个网站。在我的网站中，我有一个名为section.tsx的组件，它使用给定的props呈现文章的一个子部分。我希望该组件接受一个“align”属性。我希望在div元素的className中执行一个三元运算符，检查align属性是否等于“right”。如果为真，它应该设置一个tailwind css类结束。并且如果它为假，则它应该将其设置为开始。
下面是我的代码：

function Section({ idVal, text, title, align }) {
  return (
    <div
      id={idVal}
      className={`mt-12 w-full h-fit text-` + {align} + `grid place-items-` + {align == `right` ? `end` : `start`}}
    >
      <div className="text-4xl text-white text-end mt-20 mr-[15vw] border-b-[1px] border-b-slate-500 w-96 pl-5 rotate-2">
        <h2 className="mr-[4vw] -rotate-2">{title}</h2>
      </div>
      <p className="text-white w-[38vw] mr-[28vw] mt-8 whitespace-pre-line">
        {text}
      </p>
    </div>
  );
}

export default Section;

但是，上面的代码会引发以下错误：, expected（在==上）、Identifier expected和Expression expected。