Question

我需要在其中一列中呈现一个带有链接的表，并搜索最优雅的方法。我的主要问题是 - 并非所有表行都提供该链接。如果链接存在 - 我需要＆＃34; a＆＃34;标记呈现。如果不是 - 不需要＆＃34; a＆＃34;标签。一般来说，我想根据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个不同的组件

Answer 1

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

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

Answer 2

您也可以在运行时选择组件类型：

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>

Answer 3

看看spread properties：

您可以像这样使用它们，例如：

var extras = { };
if (this.state.liveUrl) { extras.href = this.state.liveUrl; }
return <a {...extras} >My link</a>;

这些值与直接设置的属性合并。如果他们不在该对象上，他们将被排除在外。

渲染＆＃34; a＆＃34;在React.js中使用可选的href

3 个答案: