1. 前言
类组件的一些常规操作,相当于在函数组件里面可以做的事情,我们在类组件里面也给实现一下
2.传参 语法基础 2 种方式
2.1 用bind函数传参数
<li onClick={this.chooseHandle.bind(this,"react")}>react</li>
2.2 用一个中间函数转接一下
<li onClick={()=>{ this.chooseHandle("小程序") }}>小程序</li>
2.3 完整代码
class ToggleComponent extends React.Component{ constructor(){ super(); } // ----自定义函数---- chooseHandle (name){ console.log(name); } render() { return ( <div> <ul> <li onClick={this.chooseHandle.bind(this,"react")}>react</li> <li onClick={()=>{ this.chooseHandle("小程序") }}>小程序</li> <li onClick={this.chooseHandle}>vue</li> </ul> </div> ) }; }
3. 条件布局
demo是简易的 登录注册界面 切换
3.1 条件布局 -1
先熟悉基础的语法逻辑 ,后续这些都可以单独写个组件
这个其实也是之前 状态切换的一个应用
解构赋值, 三目运算,常规使用
setState()的回调函数写法
class LoginControl extends React.Component { constructor() { super(); this.state = { toggle: true }; this.toggleHandler = this.toggleHandler.bind(this); } // ---------自定义函数 --------- toggleHandler() { this.setState(oldState => { return { toggle: !oldState.toggle }; }); } render() { let { toggle } = this.state; return ( <div> {toggle ? <h1>登录界面</h1> : <h1>注册界面</h1>} <button onClick={this.toggleHandler}> 点击切换界面</button> </div> ); } } ReactDOM.render(<LoginControl />, box);
3.2 条件布局-2
主要是熟悉把这个 虚拟
DOM对象,当做变量来使用
render() { // if判断只能写到return上面 let { toggle } = this.state; // 保存登录或者注册 let layout = null; if (toggle) { layout = <h1>登录界面</h1>; } else { layout = <h1>注册界面</h1>; } return ( <div> {layout} <button onClick={this.toggleHandler}> 点击切换界面</button> </div> ); }
4. 循环布局使用
数组
map的使用 在react里面非常常见,因为
map不改变原数组,而且可以return一个新的数组
4.1 使用方式---1
key不要忘记利用
react数组 会自动展开的特性
class ListItem extends React.Component { state = { numbers:["Vue3", "vite", "TS", "鸿蒙"] }; render() { let { numbers } = this.state; let items = numbers.map(value => { return <li key={value}>{value}</li>; }); return ( <div> <ul>{items}</ul> </div> ); } } ReactDOM.render(<ListItem />, box);
4.2 循环布局---2
js代码 写到{}里面
map遍历 直接返回()因为箭头函数 只有一行的话可以省略return和{}
return ( <div> <ol> { numbers.map(value => ( <li key={value}>{value}</li> )) } </ol> </div> );
4.3 循环布局-3
上面的写法看不懂的话 看这个,
return ( <div> <ul>{items}</ul> <br /> <ol> { numbers.map(value=>{ return <li key={value}>{value}</li> }) } </ol> </div> );
