react 基本使用
- 需要class 相关的知识
- 需要了解 JSX
- 需要了解 this.state
- 需要了解 render函数
- 需要了解 JSX中使用js
以下介绍了部分常规使用
import React from 'react';
class Basics01 extends React.Component{
constructor(props) {
super(props);
this.state = {
name: 'fux',
imgUrl: 'https://seed.bsdits.cn/img/login_banner.832b1c0a.png',
flag: true,
theme:'black',
list:[
{
id:1,
msg:'x1'
},
{
id:2,
msg:'x2'
},
]
}
}
render() {
////////////////////////////////// 1. 基础使用
// // 获取变量 插值
// const pElem = <p>{this.state.name}</p>
// return pElem
// // 表达式
// const exprElem = <p>{this.state.flag ? 'yes' : 'no'}</p>
// return exprElem
// // 子元素
// const imgElem = <div>
// <p>我的头像</p>
// <img src="xxxx.png"/>
// <img style={{'width':200+'px'}} src={this.state.imgUrl}/>
// </div>
// return imgElem
// // class
// const classElem = <p className="title">设置 css class</p>
// return classElem
// // style
// const styleData = { fontSize: '30px', color: 'blue' }
// const styleElem = <p style={styleData}>设置 style</p>
// // 内联写法,注意 {{ 和 }}
// // const styleElem = <p style={{ fontSize: '30px', color: 'blue' }}>设置 style</p>
// return styleElem
// // 原生 html
// const rawHtml = '<span>富文本内容<i>斜体</i><b>加粗</b></span>'
// const rawHtmlData = {
// __html: rawHtml // 注意,必须是这种格式
// }
// const rawHtmlElem = <div>
// <p dangerouslySetInnerHTML={rawHtmlData}></p>
// <p>{rawHtml}</p>
// </div>
// return rawHtmlElem
// // 加载组件
// const componentElem = <div>
// <p>JSX 中加载一个组件</p>
// <hr/>
// <List/>
// </div>
// return componentElem
////////////////////////////////// 2.条件判断
// const btn1 = <button className='black'>按钮black</button>
// const btn2 = <button className='white'>按钮white</button>
//
// if (this.state.theme === 'black'){
// return btn1
// }else {
// return btn2
// }
//
// return <> {this.state.theme === 'black' ? btn1 :btn2}</>
//
// return <>{this.state.theme === 'black' && btn1}</>
////////////////////////////////// 3.列表渲染
return (
<ul>
{
this.state.list.map(v => {
return <li key={v.id}>{v.msg}</li>
})
}
</ul>
)
}
}
export default Basics01