it-swarm.com.ru

Рендеринг "a" с необязательной ссылкой в ​​React.js

Мне нужно визуализировать таблицу со ссылкой в ​​одном из столбцов и искать наиболее элегантный способ сделать это. Моя главная проблема - не все строки таблицы снабжены этой ссылкой. Если ссылка присутствует - мне нужно, чтобы отображался тег "a". Если нет - нет необходимости в теге "а" вообще. Вообще говоря, я хотел бы отреагировать, чтобы обработать этот выбор (рендер против не рендеринга) в зависимости от this.state.

Это то, что у меня есть на данный момент. 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>

Это неприемлемое решение для меня, потому что эти пустые ссылки по-прежнему кликабельны. Я также попытался добавить некоторую логику в getInitalState (liveUrl: (this.props.data.liveUrl !== "") ? this.props.data.liveUrl : "javascript:void;",), которая работала нормально, но выглядит странно и добавляет ошибки в консоль (Uncaught SyntaxError: Unexpected token ;)

Единственный способ, которым у меня осталось, - это создать 2 разных компонента для

7
Arthem Dulchevsky

Это просто JavaScript, так что вы можете использовать любую логику, например:

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

Вы также можете выбрать тип компонента во время выполнения:

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

Посмотрите на свойства распространения :

Вы можете использовать их, например, так: 

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

Значения объединяются с непосредственно установленными свойствами. Если они не на объекте, они исключены. 

1
WiredPrairie