在React 0.12中动态渲染React组件

Question

之前我问过这个问题,但是使用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>
      );
    }
});

我正在创建一个组件,根据传入的名为"element"的prop来呈现不同的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>
      );
    }
});

工作得很漂亮; 没有任何控制台警告!