Javascript 反应道具类型-如果道具类型为假，是否重置为默认值？

假设我在React中使用一个按钮：

<Button appearance="primary"> Primary </Button>

这个很好用。如果我没有指定任何道具，它将默认为

primary

。但如果我写：

<Button appearance="blabla"> Primary </Button>

Primary

…我希望我的代码注意到，这不是有效的道具类型（不是主道具类型，也不是次道具类型），因此会自动将其设置回默认值

• 这可能吗？或者你不建议这样做吗
试试下面的方法

    const StyledButton = ({appearance}) => {
       const appearanceUpdate = ['primary', 'secondary'].includes(appearance) ? appearance : "primary"
       return <Button appearance={appearanceUpdate}> Primary </Button>
    }

constyledbutton=（{appearance}）=>{
const appearanceUpdate=['primary'，'secondary']。包括（外观）？外观：“primary”
返回主
}
方法1

如果您想向用户显示另一条消息，将使用无效的道具。在HTML中

const StyledButton = ({ appearance }) => {
   const isValid = ['primary', 'secondary'].includes(appearance);

   if (!isValid) {
     return <p>Invalid prop appearance can only be primary or secondary<p>
   }
   return <Button appearance={appearance}> Primary </Button>
}

constyledbutton=（{appearance}）=>{
const isValid=['primary'，'secondary']。包括（外观）；
如果（！isValid）{
return无效道具外观只能是主道具或辅助道具
}
返回主
}

方法2

如果要抛出错误（在控制台中）

constyledbutton=（{appearance}）=>{
const isValid=['primary'，'secondary']。包括（外观）；
如果（！isValid）{
抛出新错误（“propType外观无效，只能为主或次”）
}
返回主
}
我不认为这是PropTypes的用例，而应该在组件本身中完成。
我会这样做：

const options = ['primary', 'secondary'];
const defaultOption = options[0];

const StyledButton = ({ appearance }) => {
  if (!options.includes(appearance)) appearance = defaultOption;
  // ... actual implementation
}

StyledButton.defaultProps = {
  appearance: defaultOption,
}
StyledButton.propTypes = {
  appearance: PropTypes.oneOf(options)
}

方法2是无论如何都会发生的事情；默认情况下，提供无效的proptype会导致控制台警告。
const StyledButton = ({ appearance }) => {
   const isValid = ['primary', 'secondary'].includes(appearance);

   if (!isValid) {
     throw new Error("Invalid propType appearance, can only be primary or secondary")
   }
   return <Button appearance={appearance}> Primary </Button>
}

const options = ['primary', 'secondary'];
const defaultOption = options[0];

const StyledButton = ({ appearance }) => {
  if (!options.includes(appearance)) appearance = defaultOption;
  // ... actual implementation
}

StyledButton.defaultProps = {
  appearance: defaultOption,
}
StyledButton.propTypes = {
  appearance: PropTypes.oneOf(options)
}