const type = 1  // 0|1|3function getArticleJSX(){if(type === 0){return <div>无图模式模版</div>}else if(type === 1){return <div>单图模式模版</div>}else(type === 3){return <div>三图模式模版</div>}
}function App(){return (<div className="App">{ getArticleJSX() }</div>)
}

React的事件绑定

基础实现

React中的事件绑定，通过语法 on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法

使用事件参数

传递自定义参数

语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参

语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应

React组件基础使用

组件是什么

概念：一个组件就是一个用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次

组件基础使用

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写即可

// 1. 定义组件
function Button(){return <button>click me</button>
}//或者
const Button=()=>{return <button>click me</button>
}// 2. 使用组件
function App(){return (<div>{/* 自闭和 */}<Button/>{/* 成对标签 */}<Button></Button></div>)
}

组件状态管理-useState

基础使用

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果

本质：与普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）

//项目的根组件
import { useState } from 'react'function App() {const [count, setCount] = useState(0)const y = () => {setCount(count + 1)}return (<div className='App'><button onClick={y}>{count}</button></div>)
}
export default App

或者

function App(){const [ count, setCount ] = React.useState(0)return (<div><button onClick={()=>setCount(count+1)}>{ count }</button></div>)
}

---

状态的修改规则

在React中，状态被认为是只读的，我们应该始终 替换它而不是修改它， 直接修改状态不能引发视图更新，后台会变化，但是视图不会发生改变

---

修改对象状态

总代码：

---

组件的基础样式处理

---

---

classnames优化类名控制

使用前还是要引入命令npm install classnames

然后还是要导入 import classnames from 'classnames',然后改写