reactjs - 是否可以在 React 中将任何元素类型添加到 JSX？

Question

我想创建一个可以用任何元素类型构建的 super 通用组件。即，我想做这样的事情:

const Wrapper = React.createClass({
  render() {
    const { props } = this;
    const elementType = props.elementType;
    return (
      <{elementType} className={className}>
        {props.children}
      </{elementType}>
    );
  }
});

当然，当我尝试这样做时，React 会非常生气。有没有办法构建一个HTML类型待定的组件？

Answer 1

这在很大程度上取决于 elementType 是什么。在 JSX 中，您可以传入自定义组件本身，也可以传入字符串(例如 h1、p)作为“标签”。在任何情况下，您都不想将大括号 {} 放在标记周围。很简单的例子:

// Usually you want to import this. (This is just a stateless component)
const Element = (props) => <em>{props.children}</em>;

class Example extends React.Component {
  constructor() {
    super();
    this.state = { element1: 'h1', element2: Element };
  }
  render() {
    return(
      <div>
        <this.state.element1>Hello!</this.state.element1>
        <this.state.element2>World!</this.state.element2>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('View'));

<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>
<div id='View'></div>

如果你想使用字符串作为自定义组件的引用，你需要使用原生 JavaScript 和 React 的 createElement/cloneElement。