在 React 0.12 中动态渲染 React 组件

Question

I asked this question previously，但是随着 React 0.12 和它带来的 JSX 变化，我现在正在寻找另一种方法来实现这个功能。

这是在 React 0.11 中工作的代码：

return React.createClass({
    render: function() {

      var Tag = React.DOM[this.props.element];

      return (
        <Tag className='text'>
          {this.props.value}
        </Tag>
      );
    }
});

我正在制作一个组件，它根据传入的称为“元素”的道具呈现不同的 DOM 元素。 this.props.element 将是一个值，例如“p”、“h1”或“h2”等。虽然这在技术上有效，但我在控制台中看到了一条警告消息：

Warning: Do not pass React.DOM.p to JSX or createFactory. Use the string "p" instead.
Warning: Do not pass React.DOM.h2 to JSX or createFactory. Use the string "h2" instead.

需要一些指导来帮助解释该警告，我找不到有关如何执行此类操作的良好文档。

Answer 1

对此的超级简单答案（React 0.12 的 +1 让事情变得更简单！）但所需要做的就是删除变量定义的 React.DOM[] 部分，并传递字符串文字：

return React.createClass({
    render: function() {

      var Tag = this.props.element;

      return (
        <Tag className='text'>
          {this.props.value}
        </Tag>
      );
    }
});

工作精美；没有任何控制台警告！