javascript - 自动选择 React 的 HTML 元素类型

Question

我想使用 prop 从标题 h1-h6 中进行选择，然后将样式和文本插入标题中。我现在有:

import React from 'react';
import ReactLoading from 'react-loading';

import MyComponent from '../main/MyComponent';



export default class THDSpinner extends {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        let header_size = `h${this.props.size}`;

        return (
            <div className="card col-md-12">
              <span><h2 style={{fontWeight: "bold", fontSize: "25px", color: "#F96302"}}>Just a moment...Your request is being processed.</h2>
              <ReactLoading type="cylon" color="#F96302" /></span>
            </div>
        )
    }
}

THDSpinner.defaultProps = {size: 2}

然后我意识到我以前从未需要自动选择元素类型，甚至不知道从哪里开始。这可以用 React 来完成吗？如何实现？

Answer 1

当然——只需动态创建元素并组合它即可。

render(){
  const Tag = `h${this.props.size}`


  return <Tag>Just a moment...</Tag> 
}

...

<Foo size={2} />