基于 cms 在 React/Typescript app 中添加某个字段值时的条件样式

Question

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

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

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

Link类型：

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

如果 Link 组件在 page/isn 未呈现时不存在，我想向 List 组件添加一些样式 (margin-bottom)。

组件的结构如下所示：

<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`};

Answer 1

我认为您可以创建一个带有额外边距底部的 div，您可以根据 link 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
)}

基于 cms 在 React/Typescript app 中添加某个字段值时的条件样式

Conditional styling based on whenever there is a certain field value added by cms in React/Typescript app

conditional-operator

typescript

reactjs