react 方法的写法

import React from 'react'
import {Card, Button} from 'antd'
import './index.less'
export default class Buttons extends React.Component{
    //第一种方法  不用标签内传this
    handleCloseLoading = ()=>{

    }

    //第二种 需要标签内传this
    handleCloseHide(){

    }

    render(){
        return(
            <div>
                <Card title="基本样式">
                    <Button type="primary" onClick={this.handleCloseLoading}>确定</Button>
                    <Button onClick={this.handleCloseHide.bind(this)}>取消</Button>
                    <Button type="dashed">虚线</Button>
                    <Button type="danger">警告</Button>
                    <Button disabled >禁止点击</Button>
                </Card>

                <Card title="图形按钮">
                    <Button icon="android" type="primary">图标</Button>
                    <Button icon="file-search" shape="circle"></Button>
                    <Button icon="shopping" type="dashed">虚线</Button>
                    <Button icon="loading" type="danger">警告</Button>
                    <Button icon="pie-chart" disabled >禁止点击</Button>
                </Card>
            </div>
        )
    }
}
React Redux是一个结合了React和Redux的库,用于管理单页应用的状态。它的核心思想是将应用程序的状态集中存储在一个单一的store中,并通过reducer函数来更新这个状态。下面是React Redux的基本写法: 1. **安装依赖**:首先需要安装`react-redux`、`redux`和`@reduxjs/toolkit`等库。 ```bash npm install react-redux redux react-redux Toolkit ``` 2. **创建store**:在应用入口处创建Redux store,通常在`index.js`或`store.js`文件中。 ```javascript import { configureStore } from '@reduxjs/toolkit'; import rootReducer from './reducers'; const store = configureStore({ reducer: rootReducer, }); ``` 3. **创建reducer**:对每个应用状态进行分片管理,编写一个个reducer函数处理action。 ```javascript // rootReducer.js import counterReducer from './counterReducer'; export default combineReducers({ counter: counterReducer, }); ``` 4. **动作(Action)**:代表状态变化的行为,通常包含一个type属性和可选的数据。 ```javascript // actions.js export const increment = () => ({ type: 'INCREMENT', }); export const decrement = () => ({ type: 'DECREMENT', }); ``` 5. **组件连接(Provider and Connect)**:在根组件上挂载store,然后在其他组件上使用`connect`高阶组件来获取并订阅state。 ```javascript // App.js import React from 'react'; import { Provider } from 'react-redux'; import store from './store'; import Counter from './Counter'; function App() { return ( <Provider store={store}> <Counter /> </Provider> ); } export default App; ``` 6. **智能组件(Container)**:使用`mapStateToProps`和`mapDispatchToProps`从store提取数据到props,并处理actions。 ```javascript // Counter.js import { connect } from 'react-redux'; import { increment, decrement } from './actions'; function Counter({ count, dispatch }) { function handleClick(type) { dispatch(type()); } return ( <div> <button onClick={() => handleClick(increment)}>+</button> <span>{count}</span> <button onClick={() => handleClick(decrement)}>-</button> </div> ); } const mapStateToProps = (state) => ({ count: state.counter }); const mapDispatchToProps = { increment, decrement }; export default connect(mapStateToProps, mapDispatchToProps)(Counter); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值