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…