React 入门：JSX语法详解

简介

React是一个用于构建用户界面的JavaScript库，它引入了JSX语法，使得你可以在JavaScript代码中编写类似HTML的结构。JSX在编译后会被转换成正当的JavaScript对象。
JSX底子

JSX是一种看起来像HTML的JavaScript语法扩展。它并不直接被欣赏器实行，而是通过Babel这样的编译器转换成JavaScript。
根本语法

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

复制代码

在React中，你可以像这样创建一个React元素。
表达式

JSX支持在花括号{}中嵌入任何有用的JavaScript表达式。

1. const name = 'Kimi';
2. const element = <h1>Hello, {name}!</h1>;

复制代码

组件

在JSX中，你可以使用小写标签来表示HTML元素，而使用大写标签来表示React组件。

1. function Welcome(props) {
2.   return <h1>Hello, {props.name}</h1>;
3. }
5. const element = <Welcome name="Kimi" />;

复制代码

JSX与HTML的区别

• 类名 vs className：在JSX中，class必要更换为className。
  
  1. const element = <div className="my-div">Hello, world!</div>;

  复制代码
• 事件处置处罚：JSX中的事件处置处罚使用驼峰命名法。
  
  1. function handleClick() {
  2.   console.log('Clicked!');
  3. }
  5. const element = <button onClick={handleClick}>Click me</button>;

  复制代码
• 布尔属性：布尔属性假如在JSX中为true，则不必要提供属性值。
  
  1. const element = <input type="checkbox" checked />;

  复制代码

条件渲染

JSX中的条件渲染与JavaScript中的条件语句雷同。

1. const element = (
2.   <div>
3.     {condition ? <ChildComponent /> : <AnotherComponent />}
4.   </div>
5. );

复制代码

列表渲染

使用JavaScript的map()函数来渲染列表。

1. const items = ['item1', 'item2', 'item3'];
2. const element = (
3.   <ul>
4.     {items.map(item => (
5.       <li key={item}>{item}</li>
6.     ))}
7.   </ul>
8. );

复制代码

样式

在JSX中，你可以使用行内样式，大概通过className来引用CSS类。

1. const element = (
2.   <div style={{ color: 'red', fontSize: 20 }}>
3.     Hello, world!
4.   </div>
5. );

复制代码

函数作为子元素

你可以将函数作为子元素转达给组件，这在处置处罚事件时非常有用。

1. const element = <ParentComponent onClick={handleClick} />;

复制代码

结论

通过这篇教程，你应该对React的JSX语法有了根本的了解。JSX使得React的应用开发更加直观和声明式，是学习React不可或缺的一部分。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。