JSX 入门：React 开发者的必备技能指南

JSX 是 React 的一种语法扩展，用于描述 UI 组件的外观。在 React 中，JSX 可以与 JavaScript 一起使用，帮助您在应用程序中创建动态和可重用的组件。以下是 JSX 的语法、使用技巧和注意事项，以及一些示例代码。

JSX 基础语法

JSX 允许在 JavaScript 代码中编写类似于 HTML 的代码。在 JSX 中，您可以创建标签、属性和子元素，以构建组件的结构。以下是一个简单的 JSX 示例：

const greeting = <h1>Hello, World!</h1>;

JSX 表达式

JSX 允许在大括号 {} 内嵌入 JavaScript 表达式。这使您可以动态生成元素并在其中使用变量和函数。

const name = 'John';
const greeting = <h1>Hello, {name}!</h1>;

条件渲染

在 JSX 中，可以使用 JavaScript 运算符（如三元运算符或逻辑与运算符）根据条件渲染元素。

const isLoggedIn = true;
const message = (<div>{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}</div>
);

列表和键

在 JSX 中渲染列表时，需要为每个元素分配一个唯一的 key 属性，以帮助 React 识别哪些元素已更改、添加或删除。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =><li key={number.toString()}>{number}</li>
);

事件处理

在 JSX 中，可以使用 JavaScript 函数来处理用户交互事件。为了在事件处理程序中引用函数，需要使用驼峰式命名法（例如 onClick 而不是 onclick）。

function handleClick() {console.log('Button clicked!');
}const button = <button onClick={handleClick}>Click me</button>;

组件

组件是 React 中的核心概念。在 JSX 中，可以将组件视为自定义标签，并在其他组件中嵌套使用这些标签。

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const element = <Welcome name="John" />;

注意事项

JSX 标签必须闭合。
JSX 标签名称必须以大写字母开头，以区分内置的 HTML 标签和自定义组件。
在 JSX 中，需要使用 className 代替 class 属性，以避免与 JavaScript 的保留字冲突。
在 JSX 中，需要使用 htmlFor 代替 for 属性，以避免与 JavaScript 的保留字冲突。

多个元素

在 JSX 中，组件只能返回一个根元素。如果需要返回多个元素，可以将其包装在一个父元素中，例如 <div> 或 <React.Fragment>。

function App() {return (<div><h1>Hello, World!</h1><p>Welcome to React.</p></div>);
}// 或者使用 React.Fragment
function App() {return (<React.Fragment><h1>Hello, World!</h1><p>Welcome to React.</p></React.Fragment>);
}// 或者使用简写语法
function App() {return (<><h1>Hello, World!</h1><p>Welcome to React.</p></>);
}

内联样式

在 JSX 中，可以使用内联样式来设置元素的样式。需要将样式属性设置为一个 JavaScript 对象，其中键为驼峰式的 CSS 属性名称，值为字符串值。

const divStyle = {color: 'white',backgroundColor: 'black',padding: '10px',fontSize: '24px'
};const styledDiv = <div style={divStyle}>Styled Div</div>;

展开运算符

在 JSX 中，可以使用展开运算符（...）将一个对象的属性传递给组件。

const props = {name: 'John',age: 30
};function User(props) {return (<div><p>Name: {props.name}</p><p>Age: {props.age}</p></div>);
}const user = <User {...props} />;

默认属性

在 React 中，可以为组件的属性设置默认值。这在组件接收到未定义的属性时非常有用。

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}Welcome.defaultProps = {name: 'Guest'
};const element = <Welcome />; // 渲染 "Hello, Guest"

属性类型检查

使用 PropTypes 库可以为组件的属性进行类型检查，以确保正确地使用组件。

import PropTypes from 'prop-types';function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}Welcome.propTypes = {name: PropTypes.string.isRequired
};

HTML 属性命名

在 JSX 中，需要使用驼峰式命名法来命名属性。这意味着所有属性名称都应该以小写字母开头，后跟一个或多个大写字母，例如 onClick、tabIndex 和 ariaLabel。

const button = (<button onClick={handleClick} tabIndex="0" aria-label="Click me">Click me</button>
);

请注意，当在 JSX 中使用 HTML 属性时，需要使用驼峰式命名法，即使 HTML 属性本身是小写的。例如，使用 className 代替 class，使用 htmlFor 代替 for。

自定义属性

在 JSX 中，您可以为组件添加自定义属性，以传递额外的信息。自定义属性应以 data-* 或 aria-* 为前缀，以避免与内置属性冲突。

function MyComponent(props) {return (<div data-my-prop={props.myProp}>{props.children}</div>);
}const element = (<MyComponent myProp="custom-value"><h1>Hello, World!</h1></MyComponent>
);