IT技术 - 在 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 组件时有选择地包含可选的 props，我将如何优雅地做到这一点？我最初的想法是做一个这样的三元表达式，除了这不是有效的 JSX：

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

在上面的示例中，“this.props.link”是一个对象，它可能包含也可能不包含名为“value”的属性，其中包含单击图像时要浏览的超链接。此外，与其简单地提供一个空字符串作为“link”props的值，我更愿意在不存在 link.value 的情况下将其完全省略。

我的理由是，只有当 img 实际链接到某处时，我才能在 Image 组件上添加 css“img:hover {cursor:pointer;}”，而不是全局设置它，这违反了我的应用程序的 UX 规则。

我知道我可以简单地在三元组中渲染“链接”props，如果它存在，它包含链接的值，如果它不存在，则为空字符串，但出于好奇，我想看看是否可能还有另一个方法来实现这一点。

我还想避免必须执行一堆创建大量冗余 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
}

想象一下，如果您有很多要放弃的可选props，那会变得多么失控......