Javascript 根据React中的初始加载宽度动态格式化img宽度

我想根据React组件内部加载的初始宽度或高度动态格式化

img

的宽度或高度，但以下两种方法都不起作用，第一种方法根本不渲染

img

，第二种方法无法找到

某些img

。我想做的事可能吗

  const img = new Image()
  img.onload = () => {
    const height = img.height
    const width = img.width

    if (width < height) {
      img.style.width = '105px'
    } else {
      img.style.height = '105px'
    }
  }
  img.src = avatar.url

  render () {
    return (
      img
    )
  }

const img=new Image（）
img.onload=（）=>{
常数高度=img.height
常量宽度=img.width
if（宽度<高度）{
img.style.width='105px'
}否则{
img.style.height='105px'
}
}
img.src=avatar.url
渲染（）{
返回(
img
)
}

或

const formatImg=（）=>{
常数高度=img.height
常量宽度=img.width
if（宽度<高度）{
document.getElementById（'some-img'）。style.width='105px'
}否则{
document.getElementById（'some-img'）。style.height='105px'
}
}
渲染（）{
返回(
)
}

我想你对

新图像

和

上传

有些误解

第一个代码，要呈现的应该是“HTML元素”（至少看起来像），但是

img=newimage

不是。因此，您对变量

img

所做的操作当然不起作用

第二个代码，

onload={formatImg（）}

表示分配给onload prop的formatImg（）的返回值。您应该这样编码：

onload={formatImg}

最后一件事，如果我使用React，我永远不会尝试直接操作DOM元素。相反，尽可能使用

设置状态

，以便

渲染

循环运行

修改第二个选项，如下所示：

const formatImg = () => {
  const height = img.height
  const width = img.width

  if (width < height) {
    this.setState({width: '105px', height: height + 'px'})
   // document.getElementById('some-img').style.width = '105px'
  } else {
    this.setState({width: width + 'px', height: '105px'})
   // document.getElementById('some-img').style.height = '105px'
  }
}

render () {
  const { width, height } = this.state;
  return (
    <img src={avatar.url} onload={this.formatImg} style={{width, height} />
  )
}

const formatImg=（）=>{
常数高度=img.height
常量宽度=img.width
if（宽度<高度）{
this.setState（{width:'105px'，height:height+'px'}）
//document.getElementById（'some-img'）。style.width='105px'
}否则{
this.setState（{width:width+'px'，height:'105px'}）
//document.getElementById（'some-img'）。style.height='105px'
}
}
渲染（）{
const{width，height}=this.state；
返回(
)
}

第一个不起作用，因为render（）方法不应该返回DOM元素。我想你误解了React的作用
React中使用的标记不是html，也不是html DOM元素。这些标记是JSX，这是巴贝尔理解的语法糖，在生成捆绑javascript文件时转换为常规javascript。
因此，以下JSX：

<h1>hello</h1>

这就是为什么你必须使用

import React from 'react';

即使看起来你在任何地方都没有使用它。
事实上，你实际上是在使用它，因为这就是JSX所代表的。

无论如何，回到上面的代码，createElement的第一个参数“h1”告诉React您希望类型为“h1”，第三个参数是“hello”，因为这就是您希望子对象的类型。

因此，如果您的JSX是：

<div><img></img></div>

如果您想使用JSX，可以使用以下方法：

现在是重要的部分。当您使用React.createElement时，您是而不是创建DOM元素。您甚至没有实例化React组件（如果您定义了自己的组件）

您所做的只是给React一个模板结构，告诉React您打算做什么。React将在它认为合适的时候处理实际的“行为”，以及它认为合适的方式

我提到的模板结构，例如：

React.createElement(
  "h1",
  null,
  "hello"
);

很特别
任何React组件的return（）方法必须返回该类型的对象。它不能返回任何其他内容，也绝对不能返回DOM对象

您的第二个代码块几乎可以工作，尽管它仍然不是在React中执行类似操作的首选方式。但如果你真的想这样做，有些事情你需要解决

首先，“onload”属性应拼写为“onload”。此外，您还需要使用

this.formatImage

确保不要使用括号，否则代码将在React甚至将图像放在页面上之前实际运行。为什么会这样
因为巴贝尔将改变你的JSX：

<img onload={formatImg()} id="some-img" />

---

请注意，在代码中，“formatImg”函数实际上是如何在它作为参数传递到React.createElement之前运行的。（甚至在创建模板之前，而且肯定是在将模板放到页面上之前。）

小心，当您使用像React这样的标记时，您没有使用html。这是JSX感谢您的反馈，但是只执行

onload={formatImg}

而不使用

（）

根本不会调用它。我已经编辑了我的答案，

this.formatImg

应该使用，因为它是组件的实例方法。

React.createElement(
  "h1",
  null,
  "hello"
);

this.formatImage

<img onload={formatImg()} id="some-img" />

React.createElement(
     "img", 
     { onload: formatImg(), id: "some-img" }
);