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

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

var Image=React.createClass({
道具类型：{
链接：React.PropTypes.string，
事件：React.PropTypes.object，
src:React.PropTypes.string.isRequired
},
handleClick：函数（事件、链接）{
分析。跟踪（事件）
.然后（函数（）{
window.location=链接；
});
},
render:function（）{
返回(
);
} });

如果我想在调用图像组件时选择性地包括可选道具，我将如何优雅地做到这一点？我最初的想法是这样做一个三元表达式，除了这不是有效的JSX：

render:function（）{
返回(
)
}

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

我的理由是，只有当img实际链接到某个地方时，我才能在图像组件上添加css“img:hover{cursor:pointer；}”，而不是全局设置它，这违反了我应用程序的用户体验规则

我知道我可以简单地将“link”属性呈现在一个三元结构中，如果它存在，它包含链接的值，如果它不存在，它是一个空字符串，但是出于好奇，我想看看是否有其他方法来实现这一点

我还希望避免使用一堆条件语句来创建大量冗余的JSX代码，如下所示：

render:function（）{
if（this.props.link.hasOwnProperty（'value'））{
返回；
}否则{
返回；
}
..//其他可选属性
}

---

想象一下，如果你有很多可选择的道具想省掉，那会变得多么失控……

你似乎想得太多了

在您的组件中，通常应将任何falsy值视为省略

if（此.props.link）{
...
}

例外情况可能是数字，或者是罕见的（也是最好避免的情况），在这种情况下，布尔值默认为true

---

更直接的答案是使用spread（0.12中新增）

var-props={src:this.props.src}；
if（this.props.link.hasOwnProperty（'value'））{
props.link=this.props.link.value；
}

或

var extrops={}；
if（this.props.link.hasOwnProperty（'value'））{
extrops.link=this.props.link.value；
}