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

Question

У меня есть случай, когда использование у меня есть компонент изображения, который имеет необходимый «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)} /> 
); 
} }); 

If Я хочу, чтобы выборочно включать дополнительные реквизиты, когда я вызываю компонент Image, как бы я сделал это элегантно? Моя первоначальная идея состояла в том, чтобы сделать трехкомпонентное выражение, как это, за исключением того, что это не действует 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 
} 

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

Answer 1

Вы, кажется, слишком задумываетесь об этом.

<Image src={this.props.src} link={this.props.link.value} /> 

В ваших компонентах вы обычно должны обрабатывать любое значение фальши как опускаемое.

if (this.props.link) { 
    ... 
} 

Исключение было бы для чисел, или редкие (и лучше избегать случая), где это логическое недобросовестный правда.

---

Более прямой ответ будет использовать распространение (новое в 0.12).

var props = {src: this.props.src}; 
if (this.props.link.hasOwnProperty('value')) { 
    props.link = this.props.link.value; 
} 

<Image {...props} /> 

или

var extraProps = {}; 
if (this.props.link.hasOwnProperty('value')) { 
    extraProps.link = this.props.link.value; 
} 

<Image src={this.props.src} {...extraProps} />