reactjs - 条件渲染适用于无状态功能组件，但不适用于有状态

Question

我正在将无状态功能组件转换为有状态组件。在无状态版本中运行良好的条件渲染在有状态版本中会产生解析错误。

此代码有效:

const Milestone = ({ milestone }) => (
  <div>
    {milestone.displayProperties.hasIcon
  && <Img src={`https://www.bungie.net${milestone.displayProperties.icon}`} alt="Milestone Icon" />
  }
    <p>{milestone.displayProperties.name}</p>
    <p>{milestone.displayProperties.description}</p>
  </div>
);

这段代码给我一个解析错误(或者当我尝试用其他方法编写“if”语句时出现各种其他错误)

  render() {
    const { milestone } = this.props;
    return (
  <div>
    {milestone.displayProperties.hasIcon
  && <Img src={`https://www.bungie.net${milestone.displayProperties.icon}`} alt="Milestone Icon" />
  }
    <p>{milestone.displayProperties.name}</p>
    <p>{milestone.displayProperties.description}</p>
  </div>
    );
  }

我试过用不同形式的“if”语句来编写它。我得到的最接近的是

{condition ? <Img /> : null}

但是一旦我添加 src={...string literal}

它就会中断

Img 标签是一个有样式的组件。

上面的代码作为无状态代码工作得很好。即使答案是一个简单的菜鸟错误，我也很想知道我对 JSX 的不理解导致了这个错误。

编辑:这可能只是 ESLint 的问题？我应该先测试网站，因为一切似乎都在浏览器中呈现良好。

Answer 1

试试这个。

<div>
 {
  milestone.displayProperties.hasIcon 
  ? <Img src={`https://www.bungie.net${milestone.displayProperties.icon}`} alt="Milestone Icon" />
  :<span>No Icon found!</span> 
 }
 <p>{milestone.displayProperties.name}</p>
 <p>{milestone.displayProperties.description}</p>
</div>