react
种一个月亮 ୧
人言向西可剃度,向东可寻欢,只是山野笨拙,我也笨拙。
展开
-
React页面跳转
第一种方法 window.location.href = "./managerMain/managerMain.html"如果想跳转到根路径:http://localhost:3000/ 可以这样写-> window.location.href = "/"原创 2022-05-06 14:16:51 · 385 阅读 · 0 评论 -
引用带有‘-’符号的样式的方法
react引入样式的方法①导入样式import layoutStyles from '../../styles/layout.less'②使用 <Header className={headerStyles.header}> <NavToolButton2 /> </Header>header是这个less文件里的一个类名使用带有‘-’符号的类名样式此时就不能再用.了应该这样:<Content className={lay原创 2022-04-07 17:18:24 · 1451 阅读 · 0 评论 -
React getDerivedStateFromProps() 方法
作用为了替换 componentWillReceiveProps,让组件在 props 变化时更新 state。getDerivedStateFromProps 会在调用 render 方法之前调用,即在渲染 DOM 元素之前会调用,并且在初始挂载及后续更新时都会被调用。class Header extends React.Component { constructor(props) { super(props); this.state = {favoritesite: "runo原创 2022-04-02 13:07:59 · 1737 阅读 · 0 评论 -
React里的函数加与不加括号的区别
import './App.css';function App() { const handleClick=()=>{ console.log(111); } return ( <div className="App"> <button onClick={handleClick()}>button</button> </div> );}export default App;加括号不.原创 2022-03-30 09:41:42 · 1409 阅读 · 0 评论 -
关于React里使用bind时的this指向问题
关于React里使用bind时的this指向问题在上图被框起来的地方,为什么要绑定this呢?当我们想在这个函数里修改这个组件的状态的时候this.setState=({ count:this.state.count+1})此时是会报错的,此时的this代表的是handleClick方法,而这个方法里没有state,所以会报错。如果我们不想用bind绑定的话,也可以直接用箭头函数。用箭头函数的话,在函数里使用this是直接使用的该组件的this。...原创 2022-03-29 18:41:55 · 1047 阅读 · 0 评论 -
React默认路由实现重定向
<HashRouter> <Switch> <Route exact path='/studentMain/studentMain/toCompany' component={ToCompany}></Route> <Route exact path='/studentMain/studentMain/resume' component={Resume}></Route> <Route exact ..原创 2022-03-29 10:42:51 · 611 阅读 · 0 评论 -
react路由跳转
React中几种页面跳转方式1、使用 react-router-dom 中的 Link 实现页面跳转一般适用于,点击按钮或其他组件进行页面跳转,具体使用方式如下:<Link to={{ pathname: '/path/newpath', state: { // 页面跳转要传递的数据,如下 data1: {}, data2: [] }, }}> <Butt转载 2022-03-29 10:05:42 · 25360 阅读 · 0 评论 -
antd的Radio设置默认选中
当时用antd组件库的Radio单选框时,设置默认选中const Demo = () => { return ( <Form name="validate_other" {...formItemLayout} onFinish={onFinish} //通过该字段设置 initialValues={{ 'radio-group': 'c', }} > <Form.原创 2022-03-24 11:14:53 · 3140 阅读 · 0 评论 -
antd组件的list表单渲染button公用一个回调函数出错
渲染的列属性const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', width: 100, }, { title: '性别', dataIndex: 'sex',原创 2022-03-18 17:20:37 · 179 阅读 · 0 评论 -
React属性值拼接字符串和变量
<Form.Item label="岗位" name={'post'+n} style={{ width: 150 }}> <Input /></Form.Item>原创 2022-03-16 15:26:40 · 1531 阅读 · 0 评论 -
antd的Form表单如何取到表单里的数据以及如何设置默认值
获取表单数据第一步创建ref实例//在render外面,类里面就可以formRef = React.createRef()第二步给form表单赋值 <Form style={{ width: 600, marginLeft: 30, marginTop: 20 }} ref={this.formRef}> </Form>第三步给每个Form.Item添加name属性<Form.Item name="username" label="姓名"原创 2022-03-15 19:59:38 · 6339 阅读 · 1 评论 -
React使用antd组件Modal的两种方法
1、使用pubSub订阅(使用immutable.js)发布 onClick = () => { const form = Immutable.fromJS(this.state.resumeInfo) PubSub.publish(FORM_EDIT_MODAL_OPEN, { status: 'edit', form }) } //发布的同时可以传递一个参数(此处是form),这里用的是immutable //可以深层次比较订阅st原创 2022-03-15 19:52:05 · 2554 阅读 · 0 评论 -
react_路由的使用
1.第一部分是路由的出口 这里一定要用BrowserRouter包裹住import { Redirect, Route, Switch } from 'react-router'import { BrowserRouter } from 'react-router-dom';<Content> <BrowserRouter> <Switch> <Route path='/studentMain/student原创 2022-03-10 16:42:26 · 771 阅读 · 0 评论 -
redux的使用
redux的使用redux的使用主要包括三部分store仓库 reduce函数 actionstore仓库里储存着所有公共状态,通过dispatch触发action,reduce函数一直处于监听状态,当有匹配的type时返回其状态。storestore.js// applyMiddleware: redux通过该函数来使用中间件// createStore: 用于创建store实例import {createStore,applyMiddleware} from 'redux'//thunk原创 2022-03-03 19:24:29 · 191 阅读 · 0 评论 -
react生命周期
constructor(props) { console.log('constructor'); super(props); }// 将要装载,调用在constructor之后,在render之前,每一个组件render之前就会调用 componentWillMount() { console.log('componentWillMount'); }//方法在组件挂载后(插入 DOM 树中)立即调用 componentDidMount() { conso.原创 2022-03-01 15:36:40 · 259 阅读 · 0 评论