在组件和容器中多次使用道具

Question

我正在尝试将应用程序后端服务上已更改为base64的图像转换回前端上的图像，但这样做似乎会碰壁。这就是我的代码：

PhotoContainer.jsx

class PhotoContainer extends React.Component {

    constructor(props, context) {
      super(props, context);
      this.state = { photo: null };
    }

    getPhoto() {
      //code to fetch base64 encoded image from backend service
      this.setState({ photo: photo});
    }

    render() {
      return (
          <ExampleComponent photo={`data:image/png;base64,${this.state.photo}`} />
      );
    }
}

export default PhotoContainer

[我将调用PhotoContainer,jsx的组件的示例

class ExampleComponent extends React.Component {
  render() {
    return (
         <>
           <AnotherComp imageSrc={this.props.photo} alt={'photo'} />
           <AnotherComp imageSrc={photo1.jpg} alt={'another photo'} />
         </>
    );
  }
}

export default ExampleComponent;

[AnotherComp.jsx看起来像这样，其中还包括道具

class AnotherComp extends React.Component {
  render() {
    return (
         <Container>
           <img src={this.props.imageSrc} alt={this.props.alt} />
         </Container>
    );
  }
}

export default AnotherComp;

[在上面显示此信息时，ExampleComponent的导出默认设置为灰色，并表示未使用，因此不确定是否导致照片不显示？

我还计划在应用程序的另一部分上使用照片，其中包含的代码类似于AnotherComp.jsx和ExampleComponent.jsx，仅供参考。

Answer 1

变灰效果可能是由于使用了反应片段<></>以及您选择的编辑器所引起的。简短的语法片段会弄乱编辑器的配色方案，这很常见。尝试使用其他方法，仅查看这是否确实是导致此问题的原因，然后您应该可以轻松地在网络上找到修复程序。

而且，尽管我在代码上找不到任何问题，但建议您使用浏览器的开发人员工具检查图像元素，并查看图像src是否确实具有您期望看到的值。