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

我正在制作一个组件，根据传入的名为“element”的道具呈现不同的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>
      );
    }
});

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

在React 0.12中动态渲染React组件

1 个答案: