Выборочно рендеринг дополнительных свойств компонента в React JSX

У меня есть вариант использования, когда у меня есть компонент Image, который имеет требуемый атрибут "src" и необязательный атрибут "ссылка", который выглядит следующим образом:

var Image = React.createClass({

propTypes: {
  link: React.PropTypes.string,
  event: React.PropTypes.object,
  src: React.PropTypes.string.isRequired
},

handleClick: function(event, link) {
   analytics.track(event)
    .then(function() {
      window.location = link;
    });
},

render: function() {
  return (
    <img className='image' src={this.props.src} onClick={this.handleClick.bind(this, this.props.event, this.props.link)} />
  );
} });

Если я хочу выборочно включать дополнительные реквизиты, когда я вызываю компонент "Изображение", как бы я сделал это элегантно? Моя первоначальная идея состояла в том, чтобы сделать тройное выражение, подобное этому, за исключением того, что это неверно. JSX:

render: function() {
    return (
        <Image src={this.props.src} {this.props.link.hasOwnProperty('value') ? link=this.props.link.value : ''} />
    )
}

В приведенном выше примере "this.props.link" - это объект, который может содержать или не содержать свойство, называемое "значение", которое включает гиперссылку для просмотра при нажатии на изображение. Кроме того, вместо того, чтобы просто поставлять пустую строку в качестве значения для ссылки "link", я бы предпочел просто оставить ее полностью, если нет ссылки link.value.

Мое рассуждение для этого заключается в том, что в компоненте Image я могу добавить css "img: hover {cursor: pointer;}", только если img фактически ссылается где-то, а не на глобальную настройку, которая нарушает правила UX для моего приложение.

Я знаю, что я могу просто отобразить ссылку "ссылка" внутри тройной, где она включает значение ссылки, если она существует, и является пустой строкой, если это не так, но ради любопытства я хотел посмотреть, есть ли там возможно, это был еще один способ добиться этого.

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

render: function() {
    if (this.props.link.hasOwnProperty('value')) {
        return <Image link={this.props.link.value} src={this.props.src.value} />;
    } else {
        return <Image src={this.props.src.value} />;
    }
    .... // other optional properties
}

Представьте себе, как из-за руки вы получите, если у вас есть много дополнительных реквизитов, которые вы хотите оставить...

Ответ 1