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

Question

学习 React 时遇到了一个场景，我想在 React.createElement() 中定义一个“img”标签。我尝试过以下语法，但我确信它是错误的方法：

\n

function Greeting() {\n  return (\n    <div>\n      <Person />\n      <Message />\n    </div>\n  );\n}\n\nconst Person = () => {\n  <h2>Its an Image</h2>;\n\n  return React.createElement(\n    "img",\n    {},\n    "https://images-eu.ssl-images-amazon.com/images/I/81l3rZK4lnL._AC_UL200_SR200,200_.jpg"\n  );\n};\n

\n

我得到的错误如下：

\n

Error: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.\n\xe2\x96\xb6 15 stack frames were collapsed.\nModule.<anonymous>\nE:/REACT_APP/tutorial/src/index.js:43\n40 | return <p>Follow the white rabbit </p>;\n41 | };\n42 | \n> 43 | ReactDom.render(<Greeting />, document.getElementById("root"));\n44 | \n

\n

请建议，

\n

Answer 1

的参数React.createElement如下（如文档中所示）：

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

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

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

相反，您需要在创建的元素的 props 中指定 img 源，并传递null给子元素（undefined/null 在这里可以工作，所以不提供第三^个参数也可以工作）：

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

附带说明一下，渲染的内容是您从组件返回的内容。不会<h2>Its an Image</h2>;在任何地方返回或使用，就像1 + 2在常规函数内部编写一样，它将计算为3，但除此之外不会做太多事情，除非你用它做点什么。