У меня есть компонент, который иногда нужно визуализировать как <anchor>
, а иногда как <div>
. prop
, который я прочитал, чтобы определить это, - this.props.url
.
Если он существует, мне нужно сделать компонент, завернутый в <a href={this.props.url}>
. В противном случае он просто отображается как <div/>
.
Возможно ли это?
Это то, что я делаю сейчас, но чувствую, что это можно упростить:
if (this.props.link) {
return (
<a href={this.props.link}>
<i>
{this.props.count}
</i>
</a>
);
}
return (
<i className={styles.Icon}>
{this.props.count}
</i>
);
UPDATE:
Вот заключительная блокировка. Спасибо за совет, @Sulthan!
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
export default class CommentCount extends Component {
static propTypes = {
count: PropTypes.number.isRequired,
link: PropTypes.string,
className: PropTypes.string
}
render() {
const styles = require('./CommentCount.css');
const {link, className, count} = this.props;
const iconClasses = classNames({
[styles.Icon]: true,
[className]: !link && className
});
const Icon = (
<i className={iconClasses}>
{count}
</i>
);
if (link) {
const baseClasses = classNames({
[styles.Base]: true,
[className]: className
});
return (
<a href={link} className={baseClasses}>
{Icon}
</a>
);
}
return Icon;
}
}