React中JSX使用技巧-CFANZ编程社区

JSX（JavaScript XML）是React的核心特性之一，它允许开发者在JavaScript中编写类似HTML的代码，使UI组件的构建更加直观和高效。下面详细介绍JSX的使用方法和操作示例。

一、JSX基础概念

JSX是JavaScript的语法扩展，本质上是**React.createElement()**的语法糖。在编译时，JSX会被转换为纯JavaScript对象，最终由React渲染为DOM元素。

// 原始JSX
const element = <h1 className="greeting">Hello, world!</h1>;

// 编译后等效的JavaScript
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

二、JSX基础语法

1. 基本结构

// 正确的JSX语法
const element = <h1>Hello, world!</h1>;

// 自闭合标签
const image = <img src="logo.png" alt="Logo" />;

2. 嵌入表达式

在JSX中，可以使用大括号{}嵌入任何有效的JavaScript表达式：

const name = 'React';
const element = <h1>Hello, {name}!</h1>;

3. 属性使用

JSX属性使用camelCase命名，而不是HTML的kebab-case：

// 正确
const element = <img src="logo.png" className="logo" alt="Logo" />;

// 错误
const element = <img src="logo.png" class="logo" alt="Logo" />;

三、JSX高级用法

1. 条件渲染

使用三元运算符

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? 
        <h1>Welcome back!</h1> : 
        <h1>Please sign up.</h1>
      }
    </div>
  );
}

使用逻辑与运算符

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

2. 列表渲染

使用map()方法遍历数组渲染列表：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return <ul>{listItems}</ul>;
}

// 使用示例
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

注意：在列表渲染时，必须为每个元素提供唯一的key属性，帮助React识别哪些项被修改、添加或删除。

3. 内联样式

在JSX中使用内联样式需要使用对象形式：

function App() {
  const styles = {
    container: {
      backgroundColor: '#f0f0f0',
      padding: '20px',
      borderRadius: '5px'
    },
    title: {
      color: '#333',
      fontSize: '24px'
    }
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Welcome to React</h1>
    </div>
  );
}

4. 函数作为子组件

可以将函数作为子组件传递：

function WelcomeDialog() {
  return (
    <Dialog title="Welcome" message="Thank you for visiting our spacecraft!" />
  );
}

function Dialog(props) {
  return (
    <div className="dialog">
      <h1 className="dialog-title">{props.title}</h1>
      <p className="dialog-message">{props.message}</p>
    </div>
  );
}

四、JSX注意事项

必须包含在单个父元素内：

// 错误
const element = (
  <h1>Hello</h1>
  <h2>World</h2>
);

// 正确
const element = (
  <div>
    <h1>Hello</h1>
    <h2>World</h2>
  </div>
);

// 使用React.Fragment
const element = (
  <React.Fragment>
    <h1>Hello</h1>
    <h2>World</h2>
  </React.Fragment>
);

不能在{}中使用语句：

// 错误
const element = <div>{if (true) { 'Hello' }}</div>;

// 正确
const element = <div>{true ? 'Hello' : 'World'}</div>;

防注入gongji：

// 安全，React会自动转义内容
const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;

属性使用规范：

class → className
for → htmlFor
tabindex → tabIndex
style → 使用对象形式

五、完整代码

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 }
  ];

  const isLoggedIn = true;

  return (
    <div className="app">
      <h1>React JSX Example</h1>
      
      {/* 条件渲染 */}
      {isLoggedIn ? (
        <p>Welcome back, User!</p>
      ) : (
        <p>Please sign in to continue.</p>
      )}
      
      {/* 列表渲染 */}
      <h2>Users List</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} ({user.age} years old)
          </li>
        ))}
      </ul>
      
      {/* 内联样式 */}
      <div style={{
        backgroundColor: '#e6f7ff',
        padding: '15px',
        marginTop: '20px',
        borderRadius: '5px'
      }}>
        <h3>Styled Component</h3>
        <p>This is an example of inline styling in JSX.</p>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));