React中的条件性渲染方法🏠 返回首页如何在React中动态地输出一些东西与另一些东西在React组件的JSX中

如何在React中动态地输出一些东西与另一些东西

在React组件的JSX中，你可以根据条件，动态地决定输出一些组件或另一些组件，或者只是JSX的某些部分。

最常见的方式可能是三元运算符。

const Pet = (props) => {
  return (
    {props.isDog ? <Dog /> : <Cat />}
  )
}

另一种方式，当你在概念上有一个if ，但没有一个else ，这种方式很好，就是使用&& 操作符，它的工作原理是这样的：如果它前面的表达式评估为真，它就打印它后面的表达式。

const Pet = (props) => {
  return (
    {props.isDog && <Dog />}
    {props.isCat && <Cat />}
  )
}