Question

我有一些包含多个链接的产品列表。其中一个链接未填充所有产品。

{ this.getSelectedProducts().map((product) => {

    const headerProductHtml = { __html: `Learn more about ${product.name}` };

    return (
        <div className="column swiper-slide" key={ `row-header-${product.id}` }>
            <div className="column__brand-background">

                <div className="column__brand-img">
                    <div className="column__brand-img-wrapper">
                        <img src={`/img/CornProductComparisonTool/logos/${product.id}_lg.png`} alt={product.name} />
                    </div>
                    <div className="column__urls">
                        <span className="column__url-learn" dangerouslySetInnerHTML={headerProductHtml}></span>
                        <a href={product.brandUrl}>View Details</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href={product.brandLabelUrl}>View Labels</a>           
                        {if (product.brandRatingsUrl){&nbsp;&nbsp;|&nbsp;&nbsp;<a href={product.brandRatingsUrl}>View Ratings</a>}}
                    </div>
                </div>
                <div className="column__close" onClick={this.onCloseClick.bind(this, product.id)}></div>

            </div>
        </div>     
    );  
}) }

我添加的行是：

{if (product.brandRatingsUrl){&nbsp;&nbsp;|&nbsp;&nbsp;<a href={product.brandRatingsUrl}>View Ratings</a>}}

虽然它不起作用。我收到了意外的令牌错误。这条线有什么问题？

编辑：将其更改为此，仍然无法正常工作

<a href={product.brandUrl}>View Details</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href={product.brandLabelUrl}>View Labels</a>
{product.brandRatingsUrl ? &nbsp;&nbsp;|&nbsp;&nbsp;<a href={product.brandRatingsUrl}>View Ratings</a> : null}

Answer 1

JSX中的大括号表示属性表达式（more info），这就是你的if语句被破坏的原因。请尝试使用三元表达式：

{ product.brandRatingsUrl ? <a class="line-right" href={product.brandRatingsUrl}>View Ratings</a> : null }

另外，正如评论中所述，&nbps;无效JS。为了在链接之前添加垂直线，我将使用CSS（注意锚元素上的类.line-right）：

.line-right:before {
  content: "|";
  margin-right: 5px;
  display: inline-block;
}

Answer 2

查看If-Else in JSX。

例如，您可以使用三元语句：

{ product.brandRatingsUrl ? <a href={product.brandRatingsUrl}>View Ratings</a> : null }

ReactJS映射：当url变量不为空时，如何呈现html链接？

2 个答案: