By chance, THE day before I received the star rating requirement of our products, I saw the snail “★ Tiny-rate, the smallest rating component in the Eastern Hemisphere”. Inspired by the big man, I was very comfortable with a mobile terminal star rating component.

This article will cover the following:

  • Evaluate the implementation of the component
  • React Component Development Overview
  • Summary & Component source code (not business related)

Star evaluation component implementation

The implementation of the component is very simple, basically using the tiny-rate notation, except that each star is treated a little differently:

The writing method of star filling is similar to tiny-rate, which is also the superposition of two layers of elements to simulate the effect of star filling. The difference is that I add click events to each star item, in order to be compatible with our use in the mobile terminal. Click each star to obtain its serial number, and calculate the width that should be changed through THE CALC of CSS3D, so as to achieve the effect of filling stars.

In addition, since ☆ and ★ may display different effects on different mobile phones, but because the component design mode is superposition, we can replace them with pictures or SYMBOLS drawn by CSS to ensure the unity of the display of each end.

The end result is this

React Component Development Overview

The React common component is the first component to be developed

Define component functions

To the evaluation of the components, for example, in the development should focus on, according to the score function & other requirements (such as GIF after click on the star show captions) or subsidiary function should not be written to the component inside, cause components associated with weak coupling of the business, so as to provide convenience for next time use components in other situations.

Define default parameters

As a common component, it is necessary to expose Props. However, if we do not know the necessary Props when referencing, it is easy to cause parameter missing or error. If default parameters are not defined in the component, the component will not mount properly or will be covered with red letters.

Take the rating components as an example ↓↓

// In the component header you should define the Props parameters for the component to function properly
static defaultProps = {
    canClick: true.// Can you click
    rateNum: 5.// Number of stars
    handleSelectRate: null.// Callback after the star is selected
    rateValue: 0 // Select the number of stars
}
Copy the code

Keep an eye on component extensions

Our project is definitely iterative, so we should design components with flexibility in mind and with configuration space for possible iterations of requirements.

If this.state.rateValue is not assigned to the width calculation, we will use the value in this.props. RateValue to present our component. You can also be responsible for the display of ratings elsewhere. Also, the various styles of components should be one of the extensibility aspects.

Apis that need to be exposed

As a non-UI component, it naturally has its own functional responsibilities, and when that happens, it needs to have its own methods, some of which are private within the component, and some of which should be exposed for the parent to call. Take the rating component for example. As a parent, what is the biggest concern in using this rating component? That’s right, whether the user clicked on you, and what rating the user clicked on. This makes sense when we write the component to reserve a click success response for the parent component on the star click event.

handleSelectRate(value) {
    if (!this.props.canClick) {
        return
    }
    this.setState({
        rateValue: value
    })
    // Call the method passed in by the parent
    this.props.handleSelectRate && this.props.handleSelectRate(value)
}
Copy the code

Summary & Component source code (not business related)

These are not dry goods, just summed up in the peacetime work development of some things, I hope you pat. No matter what framework we use, components should be an unavoidable topic. If we can develop a good component development thinking, WE believe that we can improve our development efficiency and also provide convenience for other colleagues.

Source link -Github portal

Why do you dare to throw out the source code of a component you are using? Because… It’s really just click-rated…