Reactjs img 标签未在 src: 中呈现字符串？

Question

我正在尝试在 reactjs 中渲染图像。我正在处理一个 URL 并将其存储在一个全局 var URL 中。我想在 img 标签 src 中使用填充的 URL：我曾尝试执行以下操作，但没有奏效<img        src={url}        style={{          marginTop: '1px',          marginLeft: '1px',          marginBottom: '1px',        }}        height="500"        alt=""      />我的元素检查显示以下内容：<img src height="500" alt="" style="margin-top: 1px; margin-left: 1px; margin-bottom: 1px;">var url = '';export default function ImageGallery() {  const classes = useStyles()  getList()  return (    <div>    <Paper className={classes.root}>      <img        src={{url}}        style={{          marginTop: '1px',          marginLeft: '1px',          marginBottom: '1px',        }}        height="500"        alt=""      />            <Link to={'/imageGalleryGrid'} style={{ textDecoration: 'none' }}>              <Button variant="contained" className={classes.button}  style={{                                                                               marginTop: '1px',                                                                               marginLeft: '550px',                                                                               marginBottom: '70px',                                                                             }}>                Checkout Gallery              </Button>            </Link>      </Paper>    </div>  )}图像未显示：我在控制台中看到正在打印 URL。另外，我可以转到 URL 并查看图像。

Answer 1

关于语法和数据类型

正确的语法是您在第二个示例中使用的语法（一对花括号）：

<img src={url} ...`

添加第二对花括号意味着使用ES6/ECMA Script 2015 中提供的Object Literal Property Value Shorthand。这与编写相同

<img src={{url:url}} ...

因此，即使您url包含一个空字符串，该src属性也需要一个字符串，并使用它的toString()方法转换其他内容。这就是为什么您[Object object]在检查时会看到它。

关于react生命周期，“全局变量”和状态

如果您在文件初始化并稍后更新时总是将空字符串存储在 var 中，react 无法知道该变量已更新，因为这是 react 生命周期之外的状态。

如果您能够通过正常的函数调用（没有像从服务器获取数据等异步方式）获得正确的 URL，则可以从该函数返回 URL 并在组件内部调用它（的 render 方法）并使用它直接（而不是使用一些“全局变量”）：

function Image() {

  var url = getImageUrl();

  return <img src={url}/>;

}

如果您不是那么幸运并且需要异步调用来获取您的 URL，您需要引入本地状态（例如通过使用react hooks）或其他一些存储信息并将其作为 prop 传递给组件的方法。

顺便说一句：顶级var声明是否是全局变量在很大程度上取决于您的（构建或运行时）环境。由于它不是导出的，它也可能是该模块/文件的局部变量，不能从其他模块修改。