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
35
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
4
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
1
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
35
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
4
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
1
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>
)
}
});