javascript - 在 React.js 中使用可选的 href 渲染 "a"

Question

我需要在其中一列中呈现一个带有链接的表格，并寻找一种最优雅的方式来完成它。我的主要问题是 - 并非所有表格行都提供了该链接。如果存在链接 - 我需要呈现“a”标签。如果不是 - 根本不需要“a”标签。一般来说，我想根据 this.state 使用react来处理该选择(渲染与不渲染)。

这就是我目前所拥有的。

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 个不同的组件

Answer 1

它只是 JavaScript，因此您可以使用任何您喜欢的逻辑，例如:

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