[解決済み] Reactコンポーネントを条件付きでラップするには？

質問

コンポーネントがあるのですが、そのコンポーネントは時々 <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

最終的なロックアップはこちらです。ヒントをありがとうございました。 スルタン !

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

どのように解決するのですか？

変数を使用するだけです。

var component = (
    <i className={styles.Icon}>
       {this.props.count}
    </i>
);

if (this.props.link) {
    return (
        <a href={this.props.link} className={baseClasses}>
            {component}
        </a>
    );
}

return component;

または、ヘルパー関数を使用してコンテンツをレンダリングすることができます。JSXは他のコードと同じです。重複を減らしたいなら、関数や変数を使いましょう。