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

Question

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

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

我使用Typescript可选链接有条件地渲染Link或不。因此，如果text和url的链接字段被填充，它呈现<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`}; 

Answer 1

我认为你可以创建一个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
)}