react advanced components add and remove props

A few nagging words

Looking at Teacher Cheng Mo's in-depth and easy-to-understand high-level components, the beginning point raised a need to create two high-level components, one can customize the addition of props to the passed elements, and the other is to delete specific props. I just did it and found that high-level components need to distinguish whether the class or react element passed in, and also need to pay attention to what is returned. By the way, let’s talk about the concept of higher-order components. When a function can accept a component as a parameter, and then return, the component has certain characteristics given by this higher-order component. I understand it just means falling into a mud pit, and I have to bring some soil to come out.

Compare the two components, the code is coming

Delete advanced components of attributes

We need to pass in any component and parameter, and delete the user parameter, so the return value is a function that receives the props attribute.

import React from "react"

function removeUserProp(WrappedComponent) {
  return function newRender(props) {
    const {user, ...otherProps} = props;// Delete the user attribute value    return &lt;WrappedComponent {...otherProps} /&gt;
  }
}

export default removeUserProp

When using

 const RemoveComponent = removeUserProp(reactComponentClass)({user: "aa"});// What is returned here is a react component render () {
  return &lt;div&gt;
        {RemoveComponent}
      &lt;/div&gt;
 }

Advanced components that add attributes

import React from "react"

const addNewProps = function (WrappedComponent, newProps) {// Receive a class as a parameter, returning a class  return class WrappingComponent extends  {
    render () {
      return &lt;WrappedComponent {...} {...newProps}/&gt;
    } 
  }
}

export default addNewProps

When using it, the return value is class, so you need to convert it into a renderable react component using <ReactClassName/>

  const AddUserComponent = addNewProps(SampleComponent, {user: "aa"})
  render () {
    return <AddUserComponent />
  }

Complete example code for use:

import React from "react"
import addNewProps from './addNewProps'
import removeUserProp from './removeUserProp'

class SampleComponent extends  {

  constructor(props) {
    (props)
    super(props)
  }

  render () {
    ()
    return &lt;div&gt;
        {
          ? &lt;p&gt;Hahaha&lt;/p&gt; : &lt;p&gt;Hahaha2&lt;/p&gt;
        }   
        &lt;/div&gt;
  }
}


class Test extends  {

  render () {
    var obj = {aa: "aa"}
    const AddUserComponent = addNewProps(SampleComponent, {user: "aa"})
    const RemoveUserComponent = removeUserProp(SampleComponent)({user: "aa"})
   
    return &lt;div&gt;
         &lt;AddUserComponent /&gt;
         {RemoveUserComponent}
        &lt;/div&gt;
    
  }
}

export default Test

A little bit of gain is to understand that high-level components need to see the input and output clearly. The difference between class and react element.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.