尝试动态呈现 JSX 标签

Question

我正在创建一个<Text /> 组件，以便我可以轻松控制文本在我的应用程序中的使用方式。我希望能够为<Text /> 组件选择一个标签，具体取决于它是什么（例如<p> 用于正文，<h1> 用于标题）。

但是，我被困在了第一步。当我尝试使用函数返回标签时，出现以下错误：

Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)

这是我的组件：

import * as React from 'react'

export class Text extends React.Component {

  constructor(props) {
    super(props)
  }

  getMarkup() {
    return 'h1'
  }

  render() {
    const CustomTag = this.getMarkup()
    return (<CustomTag>Hello</CustomTag>)
  }

}

Answer 1

由于您要将标签视为字符串，因此可以使用React.createElement。在render里面写如下：

const element = React.createElement(this.getMarkup(), {}, 'Hello');
return <>{element}</>;

基本上，createElement 期望元素的类型为字符串，因此您可以传递 'h1' 而不会让 TypeScript 打扰您。
此外，你可以看到我传递了一个空数组作为第二个参数：在那里你可以传递任何 props，如 style、onClick、... 通常，在这种情况下，你会这样写：

const element = React.createElement(this.getMarkup(), {{...this.props}}, 'Hello');

当然，您需要使用 React.HTMLProps<T>. 在 Text 属性中添加正确的类型。像这样：

class App extends React.Component<React.HTMLProps<HTMLHeadingElement | HTMLParagraphElement>, IState> {`

在这种情况下，我只考虑 h 和 p 元素。

编辑：如果您要将HTMLProps 与您自己的道具（例如IProps）结合起来，那么您将编写IProps & React.HTMLProps<HTMLHeadingElement | HTMLParagraphElement>。

此时，在 this.props 中，您将拥有 (p|h) 道具和在 IProps 中定义的道具。

那么，此时，由于p 和h 元素不应该使用来自IProps 的道具，你应该重写createElement 如下：

// Assuming you have this IProps
interface IProps {
  tag: string;
  myProp: number;
}

// Inside render
const { tag, myProp, ...otherProps } = {...this.props};
const element = React.createElement(this.getMarkup(), otherProps, 'Hello');
return <>{element}</>;