1. JSX 基本语法
在 React 中，你可以使用 JSX 来定义组件的结构。JSX 中可以包含 HTML 标签、组件标签以及 JavaScript 表达式。
// 一个简单的 React 组件
import React from 'react';
class MyComponent extends React.Component {
render() {
return (
<div>
<h1>Hello, World!</h1>
<p>This is a React component.</p>
</div>
);
}
}
export default MyComponent;
2. JSX 中的表达式
在 JSX 中，你可以使用花括号 {} 插入 JavaScript 表达式。这使得你能够在 JSX 中动态地嵌入变量、运算和函数调用。
import React from 'react';
class Greeting extends React.Component {
render() {
const name = 'John';
return <p>Hello, {name}!</p>;
}
}
3. JSX 中的属性
JSX 中的标签可以包含属性，属性值可以是字符串、表达式或者是布尔值。
import React from 'react';
class MyComponent extends React.Component {
render() {
const buttonText = 'Click me!';
return (
<button disabled={false} onClick={() => alert('Button clicked')}>
{buttonText}
</button>
);
}
}
4. JSX 中的样式
在 JSX 中设置元素的样式可以使用对象，这个对象中包含 CSS 属性和对应的值。
import React from 'react';
class StyledComponent extends React.Component {
render() {
const styles = {
color: 'blue',
fontSize: '20px'
};
return <p style={styles}>Styled text</p>;
}
}
5. JSX 中的注释
在 JSX 中，你可以使用花括号 {/* */} 来添加注释。
import React from 'react';
class CommentedComponent extends React.Component {
render() {
return (
<div>
{/* This is a comment */}
<p>Rendered with a comment</p>
</div>
);
}
}
总体而言，JSX 是 React 中一项强大的语法特性，它将 HTML 结构和 JavaScript 代码融为一体，提高了组件的可读性和编写效率。当你在 React 项目中编写组件时，几乎总是会使用 JSX。
转载请注明出处：http://www.zyzy.cn/article/detail/4844/React