我需要在其中一列中呈现一个带有链接的表,并搜索最优雅的方法.我的主要问题是 - 并非所有表行都提供该链接.如果链接存在 - 我需要呈现"a"标记.如果不是 - 根本不需要"a"标签.一般来说,我想根据this.state做出反应来处理该选择(渲染vs不渲染).
这就是我现在所拥有的.React.createClass({
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>
);
}
});
Run Code Online (Sandbox Code Playgroud)
});
这个结果是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;",
),它工作正常,但看起来很奇怪,并在console(Uncaught SyntaxError: Unexpected token ;)中添加错误
我离开的唯一方法是创建2个不同的组件