React简易教程

jsx

属性

属性名

与html相比，差别在于react中属性命名与html语法大部分相同，只有一部分不同（像class在react中为className,tabindex在react中为tabIndex）；

属性值

在html中，所有属性值均为字符串类型（虽然我们有时候会使用数字），但在react中，除字符串可以直接写之外，都要包一层{}，变量/常量则位于大括号之中。举例说明：

直接写

<>
<div className='s002'>
<img src="/images/logo.png"/>
</div>
<style>{`
.s002 {
background-color: blue;
}
`}</style>
</>

<>
<div className='s002'>
<img src="/images/logo.png"/>
</div>
<style>{`
.s002 {
background-color: blue;
}
`}</style>
</>

字符串常量
<label>{'这里是特殊字符,<> @'}</label>
这里是特殊字符,<> @
数字常量
<table> <tbody> <tr> <td rowSpan={2}>01</td> </tr> </tbody> </table>
01
布尔常量
<> <input readOnly={true} disabled={false} /> <input readOnly /> </>
变量
() => { const name = '01factory'; return <input value={name} onChange={(e)=>{ console.log('value changed:', e.target.value); }} /> }

事件

react事件名，通常是原html事件首字母大写，前加前缀on.举例说明：

() => {
	function handle() {
		console.log('I am double clicked');
	}
	return <input
	type='button'
	value='click or double click me'
	onClick={() => {
		console.log('I am licked');
	}}
	onDoubleClick={handle} />;
}

() => {
	function handle() {
		console.log('I am double clicked');
	}
	return <input
	type='button'
	value='click or double click me'
	onClick={() => {
		console.log('I am licked');
	}}
	onDoubleClick={handle} />;
}

渲染列表数据

这里我们不讲某些列表组件(如这个表格组件)通过属性来设置的方法，我们来讲一下通常的用法。

例如我们有一组数据

[{"name":"john","sex":1, "age":3},{"name":"smith","sex":1, "age":3},{"name":"merry","sex":0, "age":2}]

[{"name":"john","sex":1, "age":3},{"name":"smith","sex":1, "age":3},{"name":"merry","sex":0, "age":2}]

我们可以这样写这个人员列表组件

()=>{
function C001() {
	const users = [{ 'name': 'john', 'sex': 1, 'age': 3 }, { 'name': 'smith', 'sex': 1, 'age': 3 }, { 'name': 'merry', 'sex': 0, 'age': 2 }];
	return <>
		<ul>
			{users.map((user, key) => {
				return <C002 key={key} name={user.name} sex={user.sex} age={user.age}></C002>;
			})}
		</ul>
	</>;
}
function C002({ name, sex, age }) {
	return <li>{`姓名:${name} 性别：${sex === 1 ? '男' : '女'}  年纪:${age}岁`}</li>;
}
return <>
<C001 />
</>;
}

()=>{
function C001() {
	const users = [{ 'name': 'john', 'sex': 1, 'age': 3 }, { 'name': 'smith', 'sex': 1, 'age': 3 }, { 'name': 'merry', 'sex': 0, 'age': 2 }];
	return <>
		<ul>
			{users.map((user, key) => {
				return <C002 key={key} name={user.name} sex={user.sex} age={user.age}></C002>;
			})}
		</ul>
	</>;
}
function C002({ name, sex, age }) {
	return <li>{`姓名:${name} 性别：${sex === 1 ? '男' : '女'}  年纪:${age}岁`}</li>;
}
return <>
<C001 />
</>;
}

姓名:john 性别：男年纪:3岁
姓名:smith 性别：男年纪:3岁
姓名:merry 性别：女年纪:2岁

样式

全局样式

在src/pages/_app.tsx中使用

import '../../styles/globals.css';

import '../../styles/globals.css';

局部样式

小提示：可以在组件中键入jsx，使用自动完成功能

如上面的例子，我们设置列表的字体颜色为红色，可以这样做：

()=>{
function C001() {
	const users = [{ 'name': 'john', 'sex': 1, 'age': 3 }, { 'name': 'smith', 'sex': 1, 'age': 3 }, { 'name': 'merry', 'sex': 0, 'age': 2 }];
	return <>
		<ul>
			{users.map((user, key) => {
				return <C002 key={key} name={user.name} sex={user.sex} age={user.age}></C002>;
			})}
		</ul>
	</>;
}
function C002({ name, sex, age }: { name: string; sex: number; age: number; }) {
	return <>
		<li>{`姓名:${name} 性别：${sex === 1 ? '男' : '女'}  年纪:${age}岁`}</li>
		<style jsx>{`
li{
color:red;
}
`}</style>
	</>;
}
return <C001 />;
}

()=>{
function C001() {
	const users = [{ 'name': 'john', 'sex': 1, 'age': 3 }, { 'name': 'smith', 'sex': 1, 'age': 3 }, { 'name': 'merry', 'sex': 0, 'age': 2 }];
	return <>
		<ul>
			{users.map((user, key) => {
				return <C002 key={key} name={user.name} sex={user.sex} age={user.age}></C002>;
			})}
		</ul>
	</>;
}
function C002({ name, sex, age }: { name: string; sex: number; age: number; }) {
	return <>
		<li>{`姓名:${name} 性别：${sex === 1 ? '男' : '女'}  年纪:${age}岁`}</li>
		<style jsx>{`
li{
color:red;
}
`}</style>
	</>;
}
return <C001 />;
}

第三方组件中的样式

有一些第三方的组件，会引用一些特定的样式文件，这一种就需要按第三方组件的说明来做了，比如轮播图组件的引用方法：

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay, EffectCoverflow, Keyboard } from 'swiper/core';
import 'swiper/swiper.min.css';

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay, EffectCoverflow, Keyboard } from 'swiper/core';
import 'swiper/swiper.min.css';

方案文档

开发文档

运维文档

React简易教程

jsx

属性

属性名

属性值

事件

渲染列表数据

样式

分类

全局样式

局部样式

第三方组件中的样式

Guide Video