如何有条件地包装React组件？

I have a component that will sometimes need to be rendered as an anchor and other times as a simple div. The prop I trigger off of to determine which is required is the this.props.url prop. If it exists, I need to render the component wrapped in an anchor with href={this.props.url}. Otherwise it just gets rendered as a <div/>.

我有一个组件有时需要渲染为锚点,其他时候需要渲染为简单的div。我触发的道具是确定哪个是必需的是this.props.url道具。如果它存在,我需要使用href = {this.props.url}渲染包裹在锚点中的组件。否则它只是呈现为

。

Possible?

This is what I'm doing right now, but feel it could be simplified:

这就是我现在正在做的事情,但感觉它可以简化:

if (this.props.link) {
    return (
        <a href={this.props.link} className={baseClasses}>
            <i className={styles.Icon}>
                {this.props.count}
            </i>
        </a>
    );
}

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

UPDATE:

Here is the final lockup. Thanks for the tip, @Sulthan!

这是最后的锁定。谢谢你的提示,@ 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;
    }
}

3 个解决方案

#1

Just use a variable.

只需使用变量。

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;

or, you can use a helper function to render the contents. JSX is code like any other. If you want to reduce duplications, use functions and variables.

或者,您可以使用辅助函数来呈现内容。 JSX就像其他任何代码一样。如果要减少重复,请使用函数和变量。

#2

Create a HOC (higher-order component) for wrapping your element:

创建一个HOC(高阶组件)来包装元素:

const WithLink = ({ link, className, children }) => (link ?
  <a href={link} className={className}>
    {children}
  </a>
  : children
);

return (
  <WithLink link={this.props.link} className={baseClasses}>
    <i className={styles.Icon}>
      {this.props.count}
    </i>
  </WithLink>
);

#3

You should use a JSX if-else as described here. Something like this should work.

您应该使用JSX if-else,如此处所述。这样的事情应该有效。

App = React.creatClass({
    render() {
        var myComponent;
        if(typeof(this.props.url) != 'undefined') {
            myComponent = <myLink url=this.props.url>;
        }
        else {
            myComponent = <myDiv>;
        }
        return (
            <div>
                {myComponent}
            </div>
        )
    }
});

#1