React - 使用 JSX 从 ES6 模板文字动态创建标签

Question

我需要在 Reactrender方法中显示标题元素，其中级别在构造函数中动态设置：

class HeaderComponent extends React.Component {

    constructor(props){
        super(props);
        
        this._checkedDepth = Math.min(6, props.depth)
    }

    render(){
        return(<h{ this._checkedDepth }>{ this.props.name }</h{ this._checkedDepth }>)
    }
}

ReactDOM.render(
  <HeaderComponent name="Header 1" depth="2"/>,
  document.getElementById('app')
);

<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这应该<h2>Header 1</h2>用name="Header 1"and呈现depth=2，但我收到一个错误：

未捕获的错误：找不到模块“./HeaderComponent”

我在看什么？

我使用React 15.4.1，babel-preset-es2015 6.9.0，babel-preset-react 6.5.0和运行它Chrome 55。

Answer 1

每个 JSX 元素只是调用 React.createElement(component, props, ...children) 的语法糖。因此，您可以使用 JSX 执行的任何操作也可以仅使用纯 JavaScript 执行。- https://facebook.github.io/react/docs/react-without-jsx.html

所以你可以这样做：

render() {
  return React.createElement(`h${this._checkedDepth}`, this.props)
}