React JS中如何为组件定义propTypes及设置defaultProps

1. 修复CreateComponents组件的propTypes并添加defaultProps #

首先确保已安装prop-types依赖（未安装则执行npm install prop-types），然后修正组件代码：

import React from 'react';
import PropTypes from 'prop-types';

const CreateComponents = ({ values, type, success, handler }) => {
  // 组件核心逻辑与渲染内容示例
  return (
    <div>
      <p>当前值：{values}</p>
      {/* 其他组件内容 */}
    </div>
  );
};

// 修正propTypes定义（挂载到组件函数上，而非内部变量）
CreateComponents.propTypes = {
  values: PropTypes.string, // 根据实际需求调整类型，如array/object等
  type: PropTypes.oneOf(['button', 'input', 'card']), // 示例枚举类型
  success: PropTypes.bool,
  handler: PropTypes.func.isRequired // 若handler为必填属性则添加isRequired
};

// 为values设置默认值
CreateComponents.defaultProps = {
  values: '默认内容' // 替换为你需要的默认值
};

export default CreateComponents;

2. 修改App.js中的组件调用（移除values参数） #

import React from 'react';
import CreateComponents from './CreateComponents';

function App() {
  const handleAction = () => {
    // 示例事件处理逻辑
    console.log('触发handler');
  };

  return (
    <div className="App">
      {/* 移除values='W3Schoolss'参数，组件将自动使用defaultProps中的默认值 */}
      <CreateComponents 
        type="button" 
        success={true} 
        handler={handleAction} 
      />
    </div>
  );
}

export default App;

关键说明 #

• 之前的propTypes错误大概率是定义位置错误（比如写在组件函数内部）或语法错误，修正后需将propTypes和defaultProps直接挂载到组件函数上。
• 移除App.js中的values参数后，组件会自动读取defaultProps中设置的values默认值。

内容的提问来源于stack exchange，提问作者Ramin Maghsoudi