道具驗證中是否缺少？

Question

我是使用 react 的新手，它一直說 props 驗證中缺少 children、type、onClick、buttonStyle、buttonSize，我不確定該怎么做。

代碼

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

您正在解構export const Button ({here}) =>...

此對象屬性來自您調用該組件的位置。

例如，如果我使用元素： <SignIn onSubmit={this.signIn} onRegister={this.register} />

在這種情況下，我可以使用道具 {onsubmit, onRegister}

然后我可以在組件內部調用它的值

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}>
...
 

所以請記住，當您調用元素 Button 時，必須將 children、type、onClick、buttonStyle 和 buttonSize 聲明為 props 就像這樣：

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

this.onButtonClick 可以是一個函數，而 some_variable 可以是一個局部變量。