学习React (2) - React 基础 01 JSX

JSX：将HTML与JavaScript结合使用

JSX (JavaScript XML) 是一种语法扩展，让我们可以在JavaScript代码中编写类似HTML的结构。它使得定义用户界面更加直观和简洁。以下是一些关于JSX的关键点和示例，帮助你理解它如何将HTML与JavaScript结合使用。

基本语法

在JSX中，我们可以像在HTML中那样编写标签，但这些标签实际上会被转换为JavaScript函数调用。

const element = <h1>Hello, world!</h1>;

上述代码创建了一个React元素，其中包含一个<h1>标签和文本Hello, world!。

嵌入表达式

你可以在JSX中嵌入任何有效的JavaScript表达式，只需将它们放在花括号 {} 中。

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

这段代码中，{name} 表达式会被替换成变量 name 的值，从而渲染出 Hello, John!。

属性

在JSX中，你可以像在HTML中那样向元素添加属性，但某些属性名需要注意。例如，class 变成 className，因为 class 是 JavaScript 的保留字。

const element = <div className="greeting">Hello, world!</div>;

使用JavaScript对象

你可以在JSX中使用JavaScript对象来设置属性。比如，内联样式需要使用一个含有驼峰命名属性的对象。

const style = {
  backgroundColor: 'blue',
  color: 'white',
  fontSize: '16px'
};

const element = <div style={style}>Styled text</div>;

子元素

JSX标签可以包含其他标签，从而创建复杂的嵌套结构。

const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </div>
);

条件渲染

可以使用三元运算符或逻辑 && 运算符在JSX中实现条件渲染。

const isLoggedIn = true;

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

// 使用三元运算符 <div>{isLoggedIn? <span>已登录</span> : <span>未登录</span>}</div> 
// 使用 && 运算符 <div>{isLoggedIn && <span>已登录</span>}</div>

列表渲染

通过JavaScript的 map() 方法，可以在JSX中渲染列表。

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

const element = (
  <ul>{listItems}</ul>
);

函数组件中的JSX

函数组件返回JSX，这使得它们成为创建UI的一种简洁方式。

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

const element = <Greeting name="John" />;

JSX预处理

需要注意的是，JSX并不是原生支持的JavaScript语法。它需要通过工具（如Babel）进行预处理，将其转换为标准的JavaScript函数调用：

const element = <h1>Hello, world!</h1>;
// 被转换为：
const element = React.createElement('h1', null, 'Hello, world!');

总结

JSX是React开发中的重要概念，它使得编写用户界面更自然和直观。通过将HTML结构与JavaScript逻辑结合，JSX大大提升了开发效率和代码可读性。

希望这些示例和解释能帮助你更好地理解JSX的基本用法。如果有更多问题，欢迎继续提问！