道具验证中是否缺少？

Question

I'm new to using react and it keeps saying children, type, onClick, buttonStyle, buttonSize is missing in props validation and I am unsure on what to do.

Code

import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
console.log(PropTypes)

const STYLES = ['btn--primary', 'btn--outline'];

const SIZES = ['btn--medium' , 'btn--large'];

export const Button = ({
    children, 
    type, 
    onClick, 
    buttonStyle, 
    buttonSize
}) => {
    const checkButtonsStyle = STYLES.includes(buttonStyle) 
    ? buttonStyle 
    : STYLES [0]
   
    const checkButtonsSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0]

    return (
        <Link to='/sign-up' className='btn-mobile'>
            <button
            className={`btn ${checkButtonStyle} ${checkButtonsSize}`}
                onClick={onClick}
                type={type}
                >
                {children}
            </button>
        </Link>
    )
}

Answer 1

You are destructuring the props in the export const Button ({here}) =>...

This object properties come from the place where you call that component.

For example if I use the element: <SignIn onSubmit={this.signIn} onRegister={this.register} />

In this case I could use the props {onsubmit, onRegister}

Then I can call its values inside of the component

const SignUp = ({onSubmit, onRegister}) =>{
    return (
        <form id='signin-form' className="bg-grey-lighter flex flex-col sm:w-full h-auto m-auto" onSubmit={onSubmit}>
...
 

So keep in mind that children, type, onClick, buttonStyle and buttonSize have to be declared as props when you call the element Button Just as this:

<Button onClick={this.onButtonClick} type={some_variable} ... />

Where this.onButtonClick could be a function and some_variable a local variable.