web-dev-qa-db-fra.com

Rendu "a" avec href optionnel dans React.js

Je dois rendre une table avec un lien dans l'une des colonnes et rechercher le moyen le plus élégant de le faire. Mon problème principal est que toutes les lignes de la table ne sont pas fournies avec ce lien. Si le lien est présent - j'ai besoin de cette balise "a" rendue. Si non - pas besoin de "a" tag du tout. De manière générale, je voudrais réagir pour gérer ce choix (rendre vs ne pas rendre) en fonction de this.state.

C'est ce que j'ai pour le 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>
    );
}

});

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

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

Le seul moyen qui me reste est de créer 2 composants différents pour

javascripthtmlreactjs
7
Arthem Dulchevsky

C'est juste du JavaScript, vous pouvez donc utiliser n'importe quelle logique, par exemple:

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

Vous pouvez également choisir le type de composant au moment de l'exécution:

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>
2
Jarrod Mosen

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

Vous pouvez les 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 fusionnées avec les propriétés définies directement. S'ils ne sont pas sur l'objet, ils sont exclus.

1
WiredPrairie