React中不使用JSX设置元素ID的错误排查及API参数咨询

嗨，我帮你揪出问题啦——你写的代码里，React.createElement的第一个参数犯了个小错误：对于HTML原生标签（比如div、input），得传字符串形式的标签名（比如"div"、"input"），直接写div、input的话，JS会把它们当成未定义的变量，自然会报错啦。

正确的无JSX实现代码 #

const searchDiv = React.createElement(
  "div", // 注意这里是字符串"div"，不是裸写的div
  null, // div没有额外属性，所以props传null即可
  React.createElement("input", { id: "searchBar" }) // 子元素是input，props里传id
);

给你掰扯清楚React.createElement的参数 #

React.createElement的完整调用格式是这样的：

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

我逐个给你解释每个参数的用法：

• 第一个参数：type
  • 如果是HTML原生元素，就传字符串形式的标签名，比如"div"、"input"、"h1"；
  • 如果是自定义React组件，直接传组件本身（比如你写的SearchComponent）就行。
• 第二个参数：props
  • 这是个可选的对象，用来给元素传属性、事件处理函数这些东西；
  • 如果没有要传的props，传null或者空对象{}都可以。比如给input加placeholder的话，就写{ id: "searchBar", placeholder: "输入搜索内容" }。
• 第三个及以后的参数：children
  • 这些都是元素的子节点，数量不限；
  • 子节点可以是文本字符串、React元素、甚至是数组（包含多个子元素），如果没有子节点可以不用传。

再给你举几个实用的例子加深理解：

1. 创建带文本的段落：

const textPara = React.createElement("p", null, "这是一段普通文本");

2. 创建带样式和点击事件的按钮：

const actionBtn = React.createElement(
  "button",
  { 
    className: "primary-btn", 
    onClick: () => console.log("按钮被点击啦") 
  },
  "点击触发事件"
);

3. 创建包含多个子元素的容器：

const cardDiv = React.createElement(
  "div",
  { className: "card" },
  React.createElement("h3", null, "卡片标题"),
  React.createElement("p", null, "卡片内容描述")
);

内容的提问来源于stack exchange，提问作者cmckeeth