Question

我有一个用例，我有一个Image组件，它有一个必需的＆＃34; src＆＃34;属性和可选的＆＃34;链接＆＃34;看起来像这样的属性：

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 : ''} />
    )
}

在上面的例子中＆＃34; this.props.link＆＃34;是一个对象，可能包含也可能不包含名为＆＃34; value＆＃34;其中包括单击图像时浏览到的超链接。而且，而不是简单地提供一个空字符串作为＆＃34;链接＆＃34;的值。道具，如果没有link.value，我宁愿完全放弃它。

我的理由是，在Image组件上我可以添加css＆＃34; img：hover {cursor：pointer;}＆＃34;只有img实际链接到某个地方，而不是全局设置它违反我的应用程序的UX规则。

我知道我可以简单地渲染＆＃34;链接＆＃34;如果它存在则包含链接值的三元组中的prop，如果它不存在则为空字符串，但出于好奇的考虑，我想看看是否有其他方法可以实现此目的。

我还想避免做一堆条件语句，这些语句会创建大量冗余的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} />

在React JSX中有选择地呈现可选组件属性

1 个答案: