JSX语法与React.createElement()的差异及key警告问题咨询

Hey there! Let's unpack this confusion between JSX and React.createElement, plus that annoying key warning you're seeing.

First, the real difference between JSX and React.createElement (when it comes to keys) #

JSX is indeed just syntactic sugar for React.createElement—but the way they handle child elements can look different under the hood, which is why you're seeing inconsistent warnings.

Let's break down two scenarios:

1. Static child elements (hardcoded, non-dynamic)

   • In JSX, when you write multiple sibling children directly inside a parent:

     function MyComponent() {
       return (
         <div>
           <div>First item</div>
           <div>Second item</div>
         </div>
       );
     }
     

     This gets transpiled to:

     React.createElement('div', null,
       React.createElement('div', null, 'First item'),
       React.createElement('div', null, 'Second item')
     );
     

     Here, each child is passed as a separate argument to the parent's React.createElement call. React treats these as a static list of children and doesn't require keys for them.

   • But if you manually wrap those children in an array when using React.createElement (like you probably did):

     function MyComponent() {
       return React.createElement('div', null, [
         React.createElement('div', null, 'First item'),
         React.createElement('div', null, 'Second item')
       ]);
     }
     

     Now you're passing a single array argument as the children. React interprets this as a dynamic list (even if it's static) and triggers the key warning because it expects unique identifiers for list items to optimize re-renders.

2. Dynamic lists (like mapped data)
   In this case, both JSX and React.createElement will require keys. For example, this JSX code will throw the same key warning as its React.createElement equivalent:

   // JSX version with warning
   function MyComponent({ items }) {
     return (
       <div>
         {items.map(item => <div>{item}</div>)}
       </div>
     );
   }
   

   The transpiled React.createElement version would also pass an array of children, so keys are mandatory here no matter which syntax you use.

Can you avoid both JSX and the key warning? #

Absolutely—if you're dealing with static children, just pass each child as a separate argument to React.createElement instead of wrapping them in an array. Here's how to fix your warning-triggering code:

function MyComponent() {
  return React.createElement('div', null,
    React.createElement('div', null, 'First item'),
    React.createElement('div', null, 'Second item')
  );
}

This matches exactly what the JSX version transpiles to, so React won't ask for keys here.

If you're working with dynamic lists though, there's no way around adding unique keys—this is a React requirement for efficient list rendering, regardless of whether you use JSX or raw React.createElement.

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