创建扩展 img 标签的 React 组件答案

【问题标题】：Creating React component that extends img tag创建扩展 img 标签的 React 组件
【发布时间】：2019-01-29 21:36:27
【问题描述】：

我正在尝试创建一个从远程位置呈现图像的 React 组件。我希望它继承传递的任何 props，例如 alt、style、className 等。我提前不知道这些 props 是什么。

我设法写成这样，但我遇到了以下问题：

import React, { Component } from "react";
import PropTypes from "prop-types";

class BackendImage extends Component {
  render() {
    const remoteImageURL = process.env.REACT_APP_BACKEND_URL + this.props.backendImagePath;
    return <img {...this.props} src={remoteImageURL} />;
  }
}

export default BackendImage;

BackendImage.propTypes = {
  backendImagePath: PropTypes.string,
};

第一个问题是我将 prop backendImagePath 传递给无法识别它的 img，因此抛出警告 React 无法识别 DOM 元素上的 backendImagePath 属性。

第二个问题是另一个警告，即 img 元素必须有一个 alt 属性，要么是有意义的文本，要么是用于装饰图像的空字符串。

我的方法是最好的吗？如果是这样，我该如何解决这些警告？

谢谢

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

发生这种情况是因为当您使用扩展运算符 ({...this.props}) 时，您也在 img 内部扩展了 backendImagePath，这是不允许的。

相反，您应该通过destructuring props 对象选择您自己的自定义道具，并将其他道具分布在不同的变量中。

const { backendImagePath, ...rest } = this.props;

const remoteImageURL = process.env.REACT_APP_BACKEND_URL + backendImagePath;
return <img {...rest} src={remoteImageURL} />;

【讨论】：

这确实修复了第一个警告，但它仍然抱怨缺少 alt 标签。该警告可能不会在生产中显示，但抑制它的唯一方法是从道具中提取 alt 并将其显式传递给 ?
嗯，我按照我刚才的建议做了，而且效果很好。这是组件的最终代码，如果需要，请随时添加到您的答案中。非常感谢@Alserda
导入反应，{组件}从“反应”；从“prop-types”导入 PropTypes；类 BackendImage 扩展组件 { render() { const { backendImagePath, alt, ...rest } = this.props; const remoteImageURL = process.env.REACT_APP_BACKEND_URL + backendImagePath;返回 ; } } 导出默认后端图像； BackendImage.propTypes = { backendImagePath: PropTypes.string, alt: PropTypes.string, };
在 React 中使用图像时需要 alt 标签。它总是会告诉你使用一个。您的方法是一个很好的解决方案。

【解决方案2】：

@Alserda 的上述解决方案工作得很好，但不会抑制开发环境中缺少替代文本的警告。所以这是最终代码，我还提取了 alt 属性并将其显式传递给 .

import React, { Component } from "react";
import PropTypes from "prop-types";

class BackendImage extends Component {
  render() {
    const { backendImagePath, alt, ...rest } = this.props;
    const remoteImageURL = process.env.REACT_APP_BACKEND_URL + backendImagePath;
    return <img {...rest} alt={alt} src={remoteImageURL} />;
  }
}

export default BackendImage;

BackendImage.propTypes = {
  backendImagePath: PropTypes.string,
  alt: PropTypes.string,
};

【讨论】：