在React JSX中选择性地渲染可选组件属性

我有一个用例，我有一个Image组件，它具有必需的“src”属性和一个可选的“link”属性，如下所示：

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)} />
  );
} });

如果我在调用Image组件时想选择性地添加可选道具，我该如何优雅地做到这一点？ 我最初的想法是做这样的三元表达式，除了这是无效的JSX：

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

在上面的例子中，“this.props.link”是一个对象，它可能包含或不包含名为“value”的属性，该属性包含单击图像时要浏览到的超链接。 另外，如果没有link.value存在，我宁愿将它完全抛弃，而不是简单地将空字符串作为“链接”属性的值。

我的推理是这样的，在Image组件上，我只能在img实际链接某处时添加CSS“img：hover {cursor：pointer;}”，而不是全局设置它，这违反了我的应用程序的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
}

想象一下，如果你有很多你想要离开的可选道具，会有多失控......

---

你似乎正在推翻它。

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

在你的组件中，你通常应该忽略任何falsy值。

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

一个例外是数字，或者是罕见的（也是最好的避免的情况），其布尔默认为true。

---

更直接的答案是使用价差（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} />

链接地址: http://www.djcxy.com/p/52091.html

上一篇: Selectively rendering optional component properties in React JSX

下一篇: React JSX: selecting "selected" on selected <select> option