javascript – 在React.js中使用可选的href渲染“a”

我需要在其中一列中呈现一个带有链接的表,并搜索最优雅的方法.我的主要问题是 – 并非所有表行都提供该链接.如果链接存在 – 我需要呈现“a”标记.如果不是 – 根本不需要“a”标签.一般来说,我想根据this.state做出反应来处理该选择(渲染vs不渲染).

这就是我现在所拥有的.
React.createClass({

getinitialState: function () {
    return {
        pipeline: this.props.data.pipeline,liveUrl: this.props.data.liveUrl,posted: this.props.data.created,expires: this.props.data.end
    };
},render: function () {
    return (
        <tr className="posting-list">
            <td><a href={this.state.liveUrl} target="_blank">{this.state.pipeline}</a></td>
            <td>Posted</td>
            <td>
                <input className="datepicker" type="text" value={this.state.posted}/>
            </td>
            <td>
                <input className="datepicker" type="text" value={this.state.expires}/>
            </td>
            <td>UPDATE,DELETE</td>
        </tr>
    );
}

});

这个结果是DOM元素：
< a href =“”target =“_ blank”data-reactid =“.0.6.0.0.1：1.0.0”> XING_batch< / a>

这对我来说是不可接受的解决方案,因为那些空白的href仍然是可点击的.
我还尝试为getinitalState添加一些逻辑(
liveUrl：(this.props.data.liveUrl！==“”)？ this.props.data.liveUrl：“javascript：void;”,
),工作正常,但看起来很奇怪,并在控制台中添加错误(Uncaught SyntaxError：Unexpected token;)

我离开的唯一方法是创建2个不同的组件

解决方法

这只是JavaScript,所以你可以使用你喜欢的任何逻辑,例如：

<td>
    {this.state.liveUrl  
     ? <a ...>{this.state.pipeline}</a> 
     : this.state.pipeline}
</td>

原文地址：https://www.jb51.cc/js/158156.html