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>

条件渲染可在无状态功能组件中工作，但不能在有状态组件中工作

1 个答案: