在创建自定义组件时，将原生HTML元素包装在div元素中是一种好习惯吗？

Question

好吧，假设我想创建自定义反应“原生”元素（<a>，<h1>，...）以及一些自定义样式。

这些<A>元素中哪一个是最佳选择？

/*
 *
 *`<A>` unwrapped
 *
 */ 

import React from 'react';
import styles from './styles.scss';

const A = () => {
  render() {
    const { className, children, ...attrs } = this.props;
    const classes = className ? [styles.base, className] : [styles.base];

    return (
      <a 
        className={classes.join(' ')}
        {...attrs}>
        {children}
      </a>
    );
  }
}

A.propTypes = {
  className: React.PropTypes.string,
  children: React.PropTypes.any,
};

export default A;

OR

/*
 *
 *`<A>` wrapped by a div
 *
 */ 

import React from 'react';
import styles from './styles.scss';

const A = () => {
  render() {
    const { className, children, ...attrs } = this.props;
    const classes = className ? [styles.base, className] : [styles.base];

    return (
      <div className={classes.join(' ')}>
        <a {...attrs}>
          {children}
        </a>
      </div>
    );
  }
}

A.propTypes = {
  className: React.PropTypes.string,
  children: React.PropTypes.any,
};

export default A;

考虑到：

• 开发者视角
• CSS选择器视角
• HTML观点