react之jsx基础（2）高频使用场景

在这里插入图片描述

文章目录

- 1. **组件定义**
- 2. **条件渲染**
- 3. **列表渲染**
- 4. **事件处理**
- 5. **嵌套组件**
- 6. **表单处理**
- 7. **样式应用**
- 8. **处理子组件**

在 React 中，JSX 的使用是非常广泛和高频的。以下是一些常见的高频使用场景及其示例，帮助你更好地理解 JSX 的实际应用：

1. 组件定义

JSX 最常见的用途之一是定义组件的结构。组件可以是函数组件或类组件，通常会使用 JSX 来描述组件的 UI。

函数组件示例：

function Greeting(props) {return <h1>Hello, {props.name}!</h1>;
}

类组件示例：

class Greeting extends React.Component {render() {return <h1>Hello, {this.props.name}!</h1>;}
}

2. 条件渲染

在 JSX 中，你可以使用 JavaScript 表达式来实现条件渲染。常用的方法是使用三元运算符或逻辑与运算符 (&&)，根据条件渲染不同的 UI 元素。

三元运算符示例：

function Welcome(props) {return (<div>{props.isLoggedIn ? <UserProfile /> : <LoginButton />}</div>);
}

逻辑与运算符示例：

function Notifications(props) {return (<div>{props.unreadCount > 0 && <span>You have {props.unreadCount} unread messages.</span>}</div>);
}

3. 列表渲染

当需要渲染一个列表时，JSX 可以通过 map() 函数来生成一个数组的元素。每个元素通常需要一个唯一的 key 属性。

function ItemList(props) {const items = props.items;return (<ul>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul>);
}

4. 事件处理

JSX 允许你在元素上设置事件处理器，如 onClick、onChange 等。这些事件处理器通常会触发对应的 JavaScript 函数。

function Button() {function handleClick() {alert('Button clicked!');}return <button onClick={handleClick}>Click me</button>;
}

5. 嵌套组件

组件之间可以嵌套，从而创建复杂的 UI 结构。JSX 允许你轻松地将一个组件嵌套在另一个组件中。

function App() {return (<div><Header /><MainContent /><Footer /></div>);
}

6. 表单处理

在 JSX 中，你可以创建表单，并处理用户输入。React 通过受控组件（controlled components）来管理表单元素的状态。

受控组件示例：

class Form extends React.Component {constructor(props) {super(props);this.state = { value: '' };this.handleChange = this.handleChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}handleChange(event) {this.setState({ value: event.target.value });}handleSubmit(event) {alert('A name was submitted: ' + this.state.value);event.preventDefault();}render() {return (<form onSubmit={this.handleSubmit}><label>Name:<input type="text" value={this.state.value} onChange={this.handleChange} /></label><button type="submit">Submit</button></form>);}
}

7. 样式应用

JSX 允许你使用内联样式或类名来应用样式。内联样式是一个 JavaScript 对象，而类名则像在 HTML 中一样使用 className 属性。

内联样式示例：

function StyledComponent() {const style = { color: 'blue', fontSize: '20px' };return <div style={style}>This is a styled component</div>;
}

使用类名示例：

function StyledComponent() {return <div className="my-style">This is a styled component</div>;
}

8. 处理子组件

有时组件会接受子组件作为其内容，这称为 “插槽” 或 “children”。在 JSX 中，子组件可以被直接嵌入到父组件中。

function Layout(props) {return (<div className="layout"><header>Header</header><main>{props.children}</main><footer>Footer</footer></div>);
}// 使用 Layout 组件
function App() {return (<Layout><p>This is the main content.</p></Layout>);
}

这些是 JSX 的一些常见使用场景，通过掌握这些基本用法，你可以更高效地构建和管理 React 组件。