在下面的代码示例中,只有在设置了twitter
props 时才需要添加字符串 " : "。正确的方法是什么?
let User = React.createClass({
render: function() {
let twitter = (this.props.twitter) ? (this.renderTwitter(this.props.twitter)) : null;
return (<div>{this.props.name} : {twitter}</div>)
},
renderTwitter: function(twitter) {
return (<a href={'http://www.twitter.com/' + twitter} >Twitter</a>)
}
})
let App = React.createClass( {
render: function() {
return (
<div>
<h1>User List</h1>
<User name="User 1" twitter="handle1"/>
<User name="User 2"/>
</div>
)
}
})
ReactDOM.render(<App />, document.getElementById("root"));
已尝试以下操作:
render: function() {
let twitter = (this.props.twitter) ? " : " + (this.renderTwitter(this.props.twitter)) : null;
return (<div>{this.props.name} : {twitter}</div>)
}
也试过这个:
renderTwitter: function(twitter) {
return (: <a href={'http://www.twitter.com/' + twitter} >Twitter</a>)
}
这个呢:
const User = React.createClass({
render: function() {
const { twitter } = this.props;
return (
<div>
{this.props.name}
{twitter && (
<span>
:
<a href={`http://www.twitter.com/${twitter}`}>
Twitter
</a>
</span>
)}
</div>
);
}
});
演示在这里
我们从道具中获取twitter
,然后我们使用
{twitter && (/*something to render*/)}
所以只有当Twitter是真实的时,它才会被渲染
您可以使用另一个标签包装锚标记。
return (
<span>
:
<a href={'http://www.twitter.com/' + twitter}>
Twitter
</a>
</span>
)
这是工作小提琴:JSFiddle
在单独的函数中执行此操作的好处是其可重用性。如果需要在其他任何地方显示 Twitter 句柄,只需调用此函数即可。
试试这个:
render: function() {
return (
<div>
{this.props.name} :
{this.props.twitter?<span>:<a href={'http://www.twitter.com/' + twitter}>Twitter</a></span>:null}
</div>
)
},