时间戳

首页 > 解决方案 > 基于 cms 在 React/Typescript 应用程序中添加某个字段值时的条件样式

reactjs - 基于 cms 在 React/Typescript 应用程序中添加某个字段值时的条件样式

问题描述

在我的 React/Typescript 组件中，每当CMS 添加<Link />值 (data.link?.text和) 时，我都会渲染一个组件。data?.link?.url

{data.link?.text && data?.link?.url && (
 <Link to={data?.link?.url}>
)}

我使用 Typescript Optional Chaining有条件地渲染Link或不渲染。因此，如果链接字段的textandurl被填充，它会呈现<Link />组件。

链接类型：

export type Link = {
 link: {
   url: string;
   text: string;
 };
}

如果Link页面上不存在组件/未呈现组件，我想为组件添加一些样式 ( margin-bottom) List。

组件的结构如下所示：

<List>
 <div css={styles.list}>
  // Mapped list items here
 </div>
</List>

{data.link?.text && data?.link?.url && (
 <Link css={styles.link} to={data?.link?.url}>
  {data.link.text}
 </Link>
)}

因此，我必须以某种方式创建一个布尔值并基于该布尔值，在我的中MyComponent.styles.ts我可以执行以下操作：

margin-bottom: ${haslink ? `0` : `35px`};

标签： reactjstypescriptconditional-operator

解决方案

我认为您可以创建一个带有额外边距底部的 div，您可以根据链接 url 有条件地呈现它。

<List>
  <div css={styles.list}>
    // Mapped list items here
  </div>
</List>

{data.link?.text && data?.link?.url ? (
  <Link css={styles.link} to={data.link.url}>
    {data.link.text}
  </Link>
) : (
  <div style={{ marginBottom: '35px' }} /> // <-- adjust how you style this element as needed
)}

推荐阅读