javascript 在 React.js 中使用可选的 href 渲染“a”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29483741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rendering "a" with optional href in React.js
提问by Arthem Dulchevsky
I need to render a table with a link in one of the columns, and searching for a most elegant way to do it. My main problem is - not all table rows are supplied with that link. If link is present - I need that "a" tag rendered. If not - no need for "a" tag at all. Generally speaking I would like react to handle that choice (render vs not render) depending on this.state.
我需要在其中一列中呈现一个带有链接的表格，并寻找一种最优雅的方式来做到这一点。我的主要问题是 - 并非所有表格行都提供该链接。如果存在链接 - 我需要呈现“a”标签。如果没有 - 根本不需要“a”标签。一般来说，我想根据 this.state 做出反应来处理该选择（渲染与不渲染）。
This is what I have at the moment.
这就是我目前所拥有的。
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>
);
}
});
This results is DOM element :
这个结果是 DOM 元素：
<a href="" target="_blank" data-reactid=".0.6.0.0.1:1.0.0">XING_batch</a>
<a href="" target="_blank" data-reactid=".0.6.0.0.1:1.0.0">XING_batch</a>
This is not acceptable solution for me, because those blank hrefs are still clickable.
I also tried adding some logic to getInitalState(
liveUrl: (this.props.data.liveUrl !== "") ? this.props.data.liveUrl : "javascript:void;",), which worked fine, but looks weird, and adds errors in console(Uncaught SyntaxError: Unexpected token ;)
这对我来说是不可接受的解决方案，因为那些空白的 href 仍然可以点击。我还尝试向 getInitalState( liveUrl: (this.props.data.liveUrl !== "") ? this.props.data.liveUrl : "javascript:void;",)添加一些逻辑
，它工作正常，但看起来很奇怪，并在控制台（Uncaught SyntaxError: Unexpected token ;）中添加了错误
The only way I've got left is creating 2 different components for
我剩下的唯一方法是创建 2 个不同的组件
回答by Brigand
It's just JavaScript, so you can use any logic you like, e.g.:
它只是 JavaScript，因此您可以使用任何您喜欢的逻辑，例如：
<td>
{this.state.liveUrl
? <a ...>{this.state.pipeline}</a>
: this.state.pipeline}
</td>
回答by Jarrod Mosen
You can choose the type of component at runtime, as well:
您也可以在运行时选择组件类型：
import * as React from "react";
const FooBar = props => {
const Component = props.href ? "a" : "div";
return (
<Component href={href}>
{props.children}
</Component>
);
};
<FooBar>Hello</FooBar> // <div>Hello</div>
<FooBar href="/">World</FooBar> // <a href="/">World</a>
回答by WiredPrairie
Take a look at spread properties:
看看传播属性：
You could use them like this for example:
例如，您可以像这样使用它们：
var extras = { };
if (this.state.liveUrl) { extras.href = this.state.liveUrl; }
return <a {...extras} >My link</a>;
The values are merged with directly set properties. If they're not on the object, they're excluded.
这些值与直接设置的属性合并。如果它们不在对象上，则将它们排除在外。
