I encountered a problem a few days ago. When I passed itemLayout, I always reported an error as follows:

{{labelCol:{span:3}}}} {{labelCol:{span:3}}}} {{labelCol:{span:3}}}}}} {{labelCol:{span:3}}}}}}} {{labelCol:{span:3}}}}}}}}} {{labelCol:{span:3}}}}}}}} {{labelCol:{span:3}}}} Sure enough, it worked.

I used to think that JSX syntax is very simple, just follow it, but I don’t understand the principle, and I don’t know where to start when I make mistakes. So I reviewed the React website section on JSX for a quick summary

What is JSX syntax?

JSX is a syntactic extension of JS that can be used to generate React elements.

When we build a web page, we usually generate three files. HTML/CSS/js. Now in React, we can just generate a JSX file and a CSS file. That is, JSX files are JS + HTML

What is the JSX syntax? What does this grammar do?

  1. {}

    This is where I got it wrong. In JSX syntax, the contents of {} are parsed as variables, but I want to use it as objects, so I use double parentheses to indicate that it is an object

  2. < />

    In JSX, you can customize components that render pages by passing properties or children through props.

  3. Properties are named in a slightly humped way, and because JSX is syntactically closer to JS, it is consistent with the naming of variables in JS

  4. JSX represents objects

    JSX syntax generates react elements, reads them, and builds the DOM. The react element does not equal the React component. How does it relate to the React element?

The react component, conceptually similar to the JS function, receives a porps as a property and returns the React element that render renders. If you introduce a component, use it as a component, i.e.