Question

对于创建自定义 HTML 标签，React 属性未定义

2018-11-29

179

reactjs

目前，我正在创建一个标题组件，可以通过添加 level 属性（例如 level=1 创建 <h1> 标签）来动态创建该组件。所以我的代码如下所示：

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;

但是我在 const CustomLevel 中不断收到 Uncaught TypeError: Cannot read property 'level' of undefined 。有什么想法吗？

Answer 1

无需编写

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

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

其中 props 未定义，您可以在 Title 组件内定义 CustomLevel ：

const Title = ({ level, size, text }) => {
  const CustomLevel = `h${level}`;

  return (
    <CustomLevel level={level} size={size}>
      {text}
    </CustomLevel>
  );
};

Answer 2

您正尝试在 function component 之外访问 this.props 的 level ，但该组件不可用或 undefined 。您应该注意， props 仅可用作 function component 的参数。

以下是您的问题的可行 codesandbox 。