Le rendu “un” avec l'option href dans React.js

J'ai besoin de rendre un tableau avec un lien dans une des colonnes, et que la recherche de la plus élégante façon de le faire. Mon principal problème est de ne pas toutes les lignes de la table sont fournis avec ce lien. Si le lien est présent - j'en ai besoin "d'un" tag rendus. Si ce n'est - pas besoin de "une" balise. De manière générale, je voudrais réagir à gérer ce choix (render vs pas rendu) en fonction sur ce.état.

C'est ce que j'ai en ce moment.
De réagir.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>
    );
}

});

Ce résultats est l'élément DOM :
<a href="" target="_blank" data-reactid=".0.6.0.0.1:1.0.0">XING_batch</a>

Ce n'est pas acceptable pour moi, la solution, car ces vide hrefs sont toujours cliquable.
J'ai aussi essayé d'ajouter un peu de logique pour getInitalState(
liveUrl: (this.props.data.liveUrl !== "") ? this.props.data.liveUrl : "javascript:void;",
), qui a bien fonctionné, mais un peu bizarre, et ajoute des erreurs dans la console(Uncaught SyntaxError: Unexpected token ;)

Le seul moyen que j'ai laissé est la création de 2 composants différents pour

OriginalL'auteur Arthem Dulchevsky | 2015-04-07

  1. 7

    C'est juste du JavaScript, de sorte que vous pouvez utiliser n'importe quelle logique vous le souhaitez, par exemple:

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

    OriginalL'auteur FakeRainBrigand

  2. 2

    Vous pouvez choisir le type de composant à l'exécution, ainsi: 

    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>

    OriginalL'auteur Jarrod Mosen

  3. 1

    Prendre un coup d'oeil à la propagation des propriétés:

    Vous pourriez utiliser comme ceci par exemple: 

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

    Les valeurs sont regroupées en définir les propriétés. Si elles ne sont pas sur l'objet, ils sont exclus.

    Corriger les propos de la propagation de propriétés, mais cela rend un non désirés <a> tag. L'autre solution (par FakeRainBrigand) est la bonne.
    Oui, c'est vrai-mais curieusement, la question du titre ne reflète pas la question, très bien.

    OriginalL'auteur WiredPrairie