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

原创

农民工前端 2024-09-25 13:59:13 ©著作权

文章标签 JSX 事件处理 UI 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者农民工前端的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

1. 组件定义

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

函数组件示例：

function Greeting(props) {
  return Hello, {props.name}!;
}

类组件示例：

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

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 组件。