Tag：Higher order
-
Time：2020-12-18
This is the Seventy-eighth original without water. If you want to get more original and good articles, please search the official account to pay attention to us.How to use react hooks in class components previously on React introduced hook in v16.8.0. As an enhancement of pure function components, it brings state, context and so on […]
-
Time：2020-11-23
Uncontrolled components unavailablesetStateUse uncontrolled components to get the desired results, such as file uploads Portal Function: let the component render outside the parent component Usage scenarios: overflow: hidden Parent componentz-indexThe value is too small fixedPut inbodyThe first level of ReactDOM.createPortal( <div className=”modal”>{this.props.children}</div>, document.body ); Context const ThemeContext = React.createContext(‘light’) <ThemeContext.Provider value={this.state.theme}> <A /> </ThemeContext.Provider> //Class […]
-
Time：2020-11-21
All source code, documents and images are in GitHub’s repository. Click to enter the repository Related reading React server rendering road 01: project infrastructure construction React server rendering road 02 — the simplest server rendering React server rendering road 03 — routing React server rendering road 04 — redux-01 React server rendering road 05 — […]
-
Time：2020-11-11
1、 On react ES6 writing code import React from ‘react’; import ReactDOM from ‘react-dom’; import PropTypes from ‘prop-types’; class App extends React.Component { state = { Title: ‘global big front end’ } render() { const { title } = this.state; const { name } = this.props return ( <div> <h2>{title}</h2> <p> Hello {name}! </p> </div> […]
-
Time：2020-10-28
Cannot have two HTML5 backends at the same time appears when using multiple dndproviders provided by react DND Reason: html5backend has been generated on the same page, and cannot be generated repeatedly Solution: use high-level components to build html5backend Problem address: https://codesandbox.io/s/gs988 [email protected] And above solutions: https://codesandbox.io/s/react-dnd-backend-issue-forked-uyf8z [email protected] The following versions of the solution: https://codesandbox.io/s/react-dnd-backend-issue-forked-bccjz
-
Time：2020-10-19
What is react advanced component The react high-order component is to wrap the react component that needs to be decorated in the way of high-order function, and return the react component after processing. React high-level components are frequently used in the react ecosystem, such asreact-routerMediumwithRouteras well asreact-reduxinconnectMany APIs are implemented in this way. <!– more […]
-
Time：2020-9-29
1、 Advanced component Foundation In a word: it is a function that passes in a component and returns a new component. Its function is to enhance the passed in component const lessons = [ {stage: ‘react’, Title: ‘componentized 1’}, {stage: ‘react’, Title: ‘componentized 2’}, {stage: ‘react’, Title: ‘componentized 3’} ]; //Function component function Lesson(props: any) […]
-
Time：2020-9-28
React Redux provides connect and provider to connect react and redux. Connect: used to create a container component, which enablesContainer componentsAccess the store provided by the provider component through context, and pass the state and dispatch returned by mapstatetoprops and mapdispatchtoprops to the UI component. Provider: provide store to sub components through context 1. Use […]
-
Time：2020-9-27
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options]) mapStateToProps mapStateToProps(state, ownProps) : stateProps This function allows us to bind the data in the store to the component as props. const mapStateToProps = (state) => { return { count: state.count } } (1) The first parameter of this function is the store of Redux, from which we extract the count attribute. […]
-
Time：2020-9-8
summary In the react project, Redux is often used to manage application data, and react Redux is used to bind redux. In this way, your components can read data from the store, and dispatch actions can update the store. The main idea of Redux is to make the data in the application flow according to […]
-
Time：2020-8-17
The rxjs operators are the most useful, although observable is the most basic. The most basic part of the operator (pieces) is to allow complex asynchronous code composition simplification in a declarative way. What are operators? Operators are functions. There are two operators: Pipeable operators can be created by using theobservableInstance.pipe(operator())Pipe to the observable object. […]
-
Time：2020-8-10
preface When we are doing business system, many places are adding, deleting, modifying and checking lists. It takes us a long time to do these functions. If we have similar business, we can make a set in half an hour. Isn’t it very cool.So we can have more time to learn something new. Our framework […]
