3、React开发：JSX渲染与组件属性状态解析

React开发：JSX渲染与组件属性状态解析

1. JSX渲染基础

在使用JSX进行渲染时，有一些基础规则需要遵循。

1.1 HTML标签约定

• 标签大小写 ：在JSX标记中渲染HTML标签时，标签名应使用小写。大写HTML标签名会导致渲染失败，因为标签名是区分大小写的，非HTML元素通常使用大写。例如：

import React from 'react';
import { render } from 'react-dom';

// 正常渲染，但“foo”属性会发出警告
render((
  <button foo="bar">
    My Button
  </button>
),
  document.getElementById('app')
);

// 会抛出“ReferenceError”，因为标签名大小写不符合约定
render(
  <Button />,
  document.getElementById('app')
);

• 属性传递 ：可以给HTML元素传递其标准属性。当传递意外的属性时，控制台会记录关于未知属性的警告。

1.2 描述UI结构

JSX是描述复杂UI结构的最佳方式。以下是一个使用JSX描述复杂结构的示例：

impor