React.createElement传递name参数失败，寻求仅用JSX的实现方案

嘿，我来帮你搞定这个问题！首先咱们先看看你原来的React.createElement写法出了啥问题——你在第二个参数里写了{props.name}，这其实是错误的props对象格式，正确的应该是把name作为键，props.name作为值，也就是{ name: props.name }。不过既然你想换成JSX来实现，那可比createElement直观多了！

直接用JSX改写的话，代码会清晰很多：

const Main = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
    </div>
  );
};

在JSX里，只要用大括号{}就能嵌入JavaScript表达式，所以这里把props.name放进大括号里，就能正确渲染传递过来的name值了。

如果你想让代码更简洁，还可以直接解构props里的name属性：

const Main = ({ name }) => {
  return (
    <div>
      <h1>{name}</h1>
    </div>
  );
};

这样你就不用每次都写props.name，直接用name就行啦～

内容的提问来源于stack exchange，提问作者Berk Gaffaroğlu