reactjs – 在React 0.12中动态渲染React组件

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>
      );
    }
});

我正在创建一个组件,根据传入的名为“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.

需要一些方向来帮助解释该警告,我找不到如何做这样的事情的好文档.

超简单的答案(1对于React 0.12使事情更简单!)但是所有需要做的就是删除变量定义的React.DOM []部分,传递字符串文字:
return React.createClass({
    render: function() {

      var Tag = this.props.element;

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

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

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...