Javascript JSX条件呈现语法错误

我有以下组成部分：

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

export const Checkmark=props=>(
{ 
如果（道具检查）{
} 
}
)

我的林婷在抱怨“如果”这句话（意料之外的标记）

---

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

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

{props.checked？：“”

或者，如果你真的需要陈述，你可以使用生活

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

{（函数（）{
如果（道具检查）
返回；
//...
返回“”；
})()}

来自

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

您应该改用

短路

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

{     
道具检查和
}

或

render（）{
让myHtml=“”；
如果（道具检查）{
myHtml=
}
返回（{myHtml}）；
}

有。您可能希望链接到文档的当前版本@乔丹：谢谢你。

   render(){

      let myHtml = "";

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

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