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

Question

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.

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 :

<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 ; )

The only way I've got left is creating 2 different components for

Answer 1

It's just JavaScript, so you can use any logic you like, eg:

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

Answer 2

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>

Answer 3

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.