如何在 React 中的 React.createElement() 中定义 img 标签？

Question

Learning React 遇到了一个场景，我想在 React.createElement() 中定义一个 'img' 标签。我试过下面的语法，但我确定这是一个错误的方法：

function Greeting() {
  return (
    <div>
      <Person />
      <Message />
    </div>
  );
}

const Person = () => {
  <h2>Its an Image</h2>;

  return React.createElement(
    "img",
    {},
    "https://images-eu.ssl-images-amazon.com/images/I/81l3rZK4lnL._AC_UL200_SR200,200_.jpg"
  );
};

我得到的错误如下：

Error: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
▶ 15 stack frames were collapsed.
Module.<anonymous>
E:/REACT_APP/tutorial/src/index.js:43
40 | return <p>Follow the white rabbit </p>;
41 | };
42 | 
> 43 | ReactDom.render(<Greeting />, document.getElementById("root"));
44 |

求推荐，

Answer 1

React.createElement的参数如下（如docs中所见）：

React.createElement(
  type,
  [props],
  [...children]
)

最后一个参数是子元素，但是当您创建一个图像元素时，它应该没有子元素（即：它是一个像错误提到的空元素标签）。目前，您将图像源添加为子项，相当于：

<img>
  https://images-eu.ssl-images-amazon.com/images/I/81l3rZK4lnL._AC_UL200_SR200,200_.jpg
</img>

相反，您需要在创建元素的 props 中指定 img 源，并为子元素传递 null（undefined/null 可以在这里工作，因此不提供 3^rd 参数也可以工作):

React.createElement(
  "img",
  {src: "https://images-eu.ssl-images-amazon.com/images/I/81l3rZK4lnL._AC_UL200_SR200,200_.jpg"},
  null
);

作为旁注，呈现的内容是您从组件中 return 的内容。 <h2>Its an Image</h2>; 没有被 return 编辑或在任何地方使用，就像在常规函数中写入 1 + 2，它的计算结果将是 3，但不会做太多除此之外，除非你用它做点什么。

如何在 React 中的 React.createElement() 中定义 img 标签？

How to define a img tag inside a React.createElement() in React?

reactjs

react-dom