javascript - JSX 条件渲染语法错误

Question

这个问题已经有答案了:

How can I write an else if structure using React (JSX) - the ternary is not expressive enough (7 个回答)

if-else statement inside jsx: ReactJS (17 个回答)

已关闭 5 年前。

我有以下组件:

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

我的 linting 正在提示“if”的说法(意外的标记)

Answer 1

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

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

或者，如果您确实需要语句，您可以使用 IIFE

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