JSX条件渲染语法错误[重复]

Question

我有以下组件：

export const Checkmark = props => (
  <Layout {...props}>
    { 
      if(props.checked){
        <Icon name="checkmarkBlue" small />
      } 
    }
  </Layout>
)

我的 linting 抱怨“如果”说（意外的令牌）

Answer 1

括号内必须有表达式。您可以将其更改为三元：

  { props.checked ? <Icon name="checkmarkBlue" small /> : "" }

如果您真的需要语句，也可以使用 IIFE

{(function(){
  if(props.checked)
    return <Icon name="checkmarkBlue" small />;
  //...
  return "";
})()}

Answer 2

来自React#github

if-else 语句在 JSX 中不起作用。这是因为 JSX 只是函数调用和对象构造的语法糖

你应该改用short-circuit。

<Layout {...props}>
    {     
      props.checked && <Icon name="checkmarkBlue" small />     
    }

或者

   render(){

      let myHtml = "";

      if(props.checked){
        myHtml = <Icon name="checkmarkBlue" small /> 
      }

      return (<Layout {...props}> { myHtml}</Layout>);
    }