In VUE, you can directly limit the types of props for transferring values between components

Vue.component("MyComponent", {
    props: {
        propA: Number.propB: [String.Number].// Multiple possible types
        propC: { // A mandatory character string
            type: String.required: true}}}Copy the code

In React, use the third-party library prop-types

// yarn add prop-types
// npm i prop-types -D

// This is a snippet of a component in a TODO case
import React, { Component } from 'react'
import PropTypes from 'prop-types'

import Item from '.. /Item'

export default class List extends Component {
    
    // handleChange is a required function
    // Todos is a required array
    static ropTypes = {
        handleChange:PropTypes.func.isRequired,
        todos:PropTypes.array.isRequired
    }

    render() {
        const {todos,handleChange} = this.props;
        return (
            <ul className="list-container">
                {todos.map(todo=>{
                    return <Item {. todo} key={todo.id} handleChange={handleChange}/>
                })}
            </ul>)}}Copy the code

A practical library for randomly generated unique strings, nanoid, is recommended

//yarn add nanoid
//or
//npm i nanoid -D

// How to use it
nanoid() // Randomly generate PpC_cj3BARAO1LKgokGN7
Copy the code