当前位置: 首页 > 面试题库 >

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

尤研
2023-03-14
问题内容

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

问题答案:

只需使用一个变量。

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



 类似资料:
  • 对于在其生命周期的某个点隐藏的组件,呈现它的最佳方式是什么?1)渲染组件,但不显示它(显示:无)。2)只在需要时渲染组件。什么对性能更好?如果组件的道具和状态稍后更新,是否最好让组件存在,但隐藏在虚拟DOM中? 或者这个:

  • 问题内容: 如果满足特定条件,是否有办法仅向React组件添加属性? 我应该在渲染后基于Ajax调用将required和readOnly属性添加到表单元素中,但是由于readOnly =“ false”与完全省略该属性不同,因此我看不到如何解决此问题。 下面的示例应解释我想要的内容,但将无法正常工作(解析错误:意外的标识符)。 问题答案: 显然,对于某些属性,如果您传递给它的值不真实,React足

  • 首先,请看一下代码。 对于优先级和步骤,我给出了onChange事件,因为它是一个选择表单。 此函数用于POST请求。我将每个编辑的数据发送到DB。 但是数据对象,您可以看到updateCols:[]。 在这个数组中,我必须放置已更改的属性。 例如,如果我更改标题、说明和开始日期,我必须将数组更改为 我觉得不可能每次都能查到这张申请表,所以我觉得这张申请表有问题。 有人可能只编辑标题,有人可能编辑

  • 我可以有条件地使用@JsonUnwrapped吗?我不想在序列化期间使用它,但希望在反序列化对象时使用它。 一种方法是创建两个不同的类,或者创建一个子类覆盖那个属性,这个属性在序列化和反序列化时需要表现得不同。这听起来不太对。还有其他替代方法吗?或者杰克逊解决这个问题的方法吗?

  • 如何配置设置。py,这样它就不会试图覆盖已经存在的脚本了?或者,如果编写脚本失败,至少完成包安装的其余部分。我正在使用设置工具进行设置。皮耶。设置的相关部分。这是什么 我的setup.py有版本化脚本(脚本名称中包含python版本)和未版本化脚本。在OS X上,我使用2.7版本的系统python,这需要超级用户权限来运行pip(sudo pip...),这导致脚本安装在具有根所有权的下。然后,当

  • 本文向大家介绍怎样有条件地渲染组件?相关面试题,主要包含被问及怎样有条件地渲染组件?时的应答技巧和注意事项,需要的朋友参考一下 or