![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
森姐姐
这个作者很懒,什么都没留下…
展开
-
react拓展
一、setState更新状态的2种写法 1)对象式的setState setState(stateChange, [callback]) // 1、stateChange为状态改变对象(该对象可以体现出状态的更改) // 2、callback是可选的回调函数,它在状态更新完毕、界面也更新后(render调用后)才被调用 2)函数式的setState setState(updater, [callback]) this.setState(state => ({count: state.count +原创 2021-03-17 08:51:47 · 129 阅读 · 0 评论 -
redux
一、reducer reducer的本质是一个函数,接收:preState, action,返回加工后的状态 reducer有两个作用:初始化状态,加工状态 reducer被第一次调用时,是store自动触发的, 传递的preState是undefined, 传递的action是:{type: ‘@@REDUX/INIT_a.2.b.4’} 在index.js中监测store中状态的改变,一旦发生改变重新渲染 备注:redux只负责管理状态,至于状态的改变驱动着页面的展示,要靠我们自己原创 2021-03-16 23:35:17 · 122 阅读 · 0 评论 -
antd按需引入+自定义主题
1.安装依赖: yarn add react-app-rewired customize-cra babel-plugin-import less less-loader 2.修改package.json "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject原创 2021-03-04 22:53:02 · 316 阅读 · 1 评论 -
react路由传参
路由传参的三种方式 1、params参数 // 1、路由链接(携带参数) <Link to='/demo/test/tom/18'>详情</Link> // 2、注册路由,声明接收 <Route path='/demo/test/:name/:age' component={Test} /> // 3、接收参数 const {name, age} = this.props.match.params; ...原创 2021-03-02 23:37:28 · 349 阅读 · 0 评论 -
react路由
一、路由的基本使用 1、明确好界面中的导航区,展示区 2、导航区的a标签改为Link标签 <Link to='/xxx'>Demo</Link> 3、展示区写Route标签进行路径的匹配 <Route path='/xxx' component={Demo} /> 4、的最外侧包裹了一个或 二、路由组件与一般组件 1、写法不同: 一般组件:<Demo /> 路由组件:<Route path='/demo' component=原创 2021-02-28 14:10:09 · 112 阅读 · 0 评论 -
react组件之间传值
pubsub传值适用于任意组件间相互传值 import PubSub from 'pubsub-js'; export default class List extends Component { componentDidMount() { this.token = PubSub.subscribe('atguigu', (msg, data) => { console.log(data); }); } compone.原创 2021-02-27 16:53:54 · 97 阅读 · 0 评论 -
react-ref属性
1、最开始的写法-字符串写法 class Demo extends React.Component { showData = () => { const {input1} = this.refs; alert(input1.value); } render() { return ( <div> <input ref="input1" onBlur={this原创 2021-02-21 14:50:21 · 122 阅读 · 1 评论 -
react-props属性校验
1、对标签属性进行类型,必要性的限制 Person.propTypes = { name: PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number } 2、指定默认标签属性值 Person.defaultProps = { sex: '保密', age: 18 } ...原创 2021-02-20 22:19:29 · 214 阅读 · 0 评论