Reactjs 未定义用于创建自定义HTML标记的React属性

目前，我正在创建一个标题组件，该组件可以通过添加一个级别属性（例如，级别=1）来动态创建，并创建一个

标记。因此，我的代码如下所示：

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

const CustomLevel = `h${this.props.level}`;

const Title = ({ level, size, text }) => (
  <CustomLevel level={level} size={size}>
    {text}
  </CustomLevel>
);

Title.propTypes = {
  text: PropTypes.node.isRequired,
  level: PropTypes.oneOf(['1', '2', '3', '4', '5', '6']),

  /** This will set the size of the text */
  size: PropTypes.oneOf(['xSmall', 'small', 'medium', 'big'])
};

Title.defaultProps = {
  size: 'medium',
  level: '2'
};

/**
 * @component
*/
export default Title;

从“React”导入React；
从“样式化组件”导入样式化；
从“道具类型”导入道具类型；
const CustomLevel=`h${this.props.level}`；
常量标题=（{level，size，text}）=>(
{text}
);
Title.propTypes={
text:PropTypes.node.isRequired，
级别：PropTypes.oneOf（['1'，'2'，'3'，'4'，'5'，'6']），
/**这将设置文本的大小*/
大小：PropTypes.oneOf（['xSmall'，'small'，'medium'，'big']）
};
Title.defaultProps={
尺寸：'中等'，
级别：“2”
};
/**
*@组件
*/
导出默认标题；

但是我不断得到

未捕获的TypeError:cannotread属性'level'的未定义的
constcustomlevel
。有什么想法吗？
代替写作

const CustomLevel = `h${this.props.level}`;

const Title = ({ level, size, text }) => (
  <CustomLevel level={level} size={size}>
    {text}
  </CustomLevel>
);

而不是写作

const CustomLevel = `h${this.props.level}`;

const Title = ({ level, size, text }) => (
  <CustomLevel level={level} size={size}>
    {text}
  </CustomLevel>
);

您正试图访问
功能组件
之外的
此.props的
级别
，该组件不可用或
未定义
。您应该注意，
props
仅作为
功能组件的参数提供

这是您问题的解决方法。
您正在尝试访问
此功能组件的
级别
。功能组件
之外的道具
，该组件不可用或
未定义
。您应该注意，
props
仅作为
功能组件的参数提供

这是你问题的解决方法。
@RonaldZwiers欢迎@欢迎罗纳尔茨威尔斯！