मेरे पास एक घटक है जिसे कभी-कभी <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>
);
अपडेट करें:
यहाँ अंतिम लॉकअप है। टिप के लिए धन्यवाद, @ सुल्तान !
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;
}
}
const baseClasses =
उसif (this.props.link)
शाखा में भी जा सकते हैं । जैसा कि आप ES6 का उपयोग कर रहे हैं, इसलिए आप स्थानीय चर के रूप मेंconst {link, className} = this.props;
उपयोग करकेlink
और फिर थोड़ा सरल भी कर सकते हैंclassName
।