gpt4 book ai didi

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

转载 作者:IT王子 更新时间:2023-10-29 02:55:48 25 4
gpt4 key购买 nike

我有一个有时需要呈现为 <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 和其他代码一样。如果您想减少重复,请使用函数和变量。

关于javascript - 如何有条件地包装 React 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33710833/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com