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

Posted 2023-02-21

【中文标题】JSX条件渲染语法错误[重复]

【英文标题】：JSX conditional rendering syntax error [duplicate]

【发布时间】：2018-08-02 13:15:57

【问题描述】：

我有以下组件：

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

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

【问题讨论】：

这里有an entire page about this in the docs。

【参考方案1】：

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

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

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

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

【参考方案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>);
    

【讨论】：

您可能希望链接到文档的当前版本。 reactjs.org/docs/…

@JordanRunning 谢谢伙计。