React 是否有类似于 Angular 的 *ngIf 的东西？

Question

我正在尝试创建一个基于样式化组件的 React 组件。到目前为止它看起来像这样：

import { StyledComponent } from "./styles";

type ComponentProps = {
  icon: string;
  boldTxt?: string;
  normalTxt?: string;
};

const Component = ({ icon, boldTxt, normalTxt }: ComponentProps) => {
  return (
    <StyledComponent>
      <i className={icon}></i>
      <span>{boldTxt}</span>
      <span>{normalTxt}</span>
    </StyledComponent>
  );
};

export default Component;

在这种情况下 StyledComponent 的内容无关紧要。

由于 boldTxt 和 normalTxt 道具是可选的，所以并不总是确定 spans 中会有一些东西。但是，即使没有内容，它们也会占用 space。

在Angular中我会写这样的东西：

<span *ngIf="boldTxt">{boldTxt}</span>
<span *ngIf="normalTxt">{normalTxt}</span>

然后 spans 只有在它们不是 empty/null 时才会被渲染。这能否在 React 中优雅地实现，或者...？

Answer 1

没有完全一样的东西，有一个属性。但也许：

const Component = ({ icon, boldTxt, normalTxt }: ComponentProps) => {
  return (
    <StyledComponent>
      <i className={icon}></i>
      {boldTxt && <span>{boldTxt}</span>}
      {normalTxt && <span>{normalTxt}</span>}
    </StyledComponent>
  );
};

React 是否有类似于 Angular 的 *ngIf 的东西？

Does React have something similar to Angular's *ngIf?

reactjs

react-props