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

JavaScript React.js

逆天乐樱

2020-03-16

我有一个组件，有时有时需要呈现为<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>
);

更新：

这是最终的锁定。感谢您的提示，@ 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;
    }
}

第1793篇《如何有条件地包装React组件？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
JinJin小宇宙 2020.03.16

您还可以使用如下所示的util函数：

const wrapIf = (conditions, content, wrapper) => conditions
        ? React.cloneElement(wrapper, {}, content)
        : content;
小小LDavaid 2020.03.16

只需使用一个变量。

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和其他代码一样。如果要减少重复，请使用函数和变量。

斯丁小胖Jim 2020.03.16

您还可以使用以下组件：conditional-wrap

一个简单的React组件，用于根据条件包装子级。

神无村村 2020.03.16

这是我看过用来完成工作的有用组件的一个示例（不确定谁要认可它）：

const ConditionalWrap = ({ condition, wrap, children }) => (
 condition ? wrap(children) : children
);

用例：


<ConditionalWrap
  condition={Boolean(someCondition)}
  wrap={children => (<a>{children}</a>)} // Can be anything
>
 This text is passed as the children arg to the wrap prop
</ConditionalWrap>
Jim阿飞 2020.03.16

创建一个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>
);
神无Green前端 2020.03.16

还有另一种方式可以使用参考变量

let Wrapper = React.Fragment //fallback in case you dont want to wrap your components

if(someCondition) {
    Wrapper = ParentComponent
}

return (
    <Wrapper parentProps={parentProps}>
        <Child></Child>
    </Wrapper>

)

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android