qq_44897151的博客

list.jsx部分import React, { Component } from "react";import { connect } from "react-redux";const mapStateToProps = (state) => { return { list: state.list, };};class List extends Component { handleDelete = (index) => { this.props.list

简单实现了react-redux发现了connect中的两个类似辅助函数的家伙mapStateToPropsmapDispatchToProps改写第一步index.js部分import store from "./todolist/store";import App from './todolist/App1';import { Provider } from "react-redux"ReactDOM.render( // 注入依赖 <Provider store={s

父子组件中的状态状态提升不是子组件交给父组件东西，再由父组件集中分发而是子组件不管了，直接上交状态但是父组件管理该状态后，给那个投降的组件一个允许改变状态的方法这样投降组件明面上接受父组件的管理，但是自家的军队可以控制，而且父组件也可以获取投降组件的更改状态后的值，就可以分发给其他部父组件部分;import React, { Component } from "react";import Child from "./child";import Child2 from "./child

父组件部分// 一个炒鸡简易的redux状态管理// 由于这里只引用了createStore,所以下面暂时只引入它import React, { Component } from "react";import { createStore } from "redux";// 定义两个按钮之间的默认值const defaultState = { num: 10,};// ### 下面是状态管理部分 主要的也就是下面的写法了const reducer = (state = defaultS

没有用到Portal 这里亮点1、在使用了style样式样式化成标签包裹2、函数式子组件里写点击事件3、函数与方法import React, { Component } from "react";import { Wrap, Center } from "./style";// 弹框子组件const Portal = () => { // 函数组件里创建方法要加const 另外使用不用加this const wrap = (ev) => { ev.stopPro

主要是createContext 中的Provider Consumer两个参数import React, { Component, createContext } from "react";{ /* 这严格来说是在页面分了组件 就是少了import步骤 */}// 按理说这只是一个分组件传参的东东 一个页面上用不上吧// 这关键之处在把三个东西绑定在一个大的盒子里，这个盒子就是上面的createContextconst { Provider, Consumer } = createC