ReactJS开关大小写仅在比较字符串时返回默认值

Question

我正试图让span在道具的条件下显示不同的内容。

道具videoid是一个简单的youtube视频id(类似于Mn4oTaoyZKE(，渲染得非常好。这是完全跳过case语句并呈现default的结果。

我想不出成功检查videoid是否真的包含字符串的方法。

switch(videoid){
switch(videoid) {
case videoid!="":
return  <span className="text-muted small"><a href={this.props.url} target="_blank" rel="noopener noreferrer">{this.props.title} {this.props.videoid}</a><VideoModal value={this.props.videoid}/></span>
case videoid=="":
return  <span className="text-muted small"><a href={this.props.url} target="_blank" rel="noopener noreferrer">{this.props.title} {this.props.videoid}</a></span>
default:
return videoid;
}
}

Answer 1

我不得不添加一个单独的函数，使检查

class Title extends Component {
isValidId(videoid){
if (videoid != "")
return true
else if (videoid == "")
return false
}
switch(videoid){
switch(this.isValidId(videoid)) {
case true:
return  <span className="text-muted small"><a href={this.props.url} target="_blank" rel="noopener noreferrer">{this.props.title} {this.props.videoid}</a><VideoModal value={this.props.videoid}/></span>
case false:
return  <span className="text-muted small"><a href={this.props.url} target="_blank" rel="noopener noreferrer">{this.props.title} {this.props.videoid}</a></span>
default:
return videoid;
}
}
render(){
return (
//<span className="text-muted small"><a href={this.props.url} target="_blank" rel="noopener noreferrer">{this.props.title} {this.props.videoid}</a><VideoModal value={this.props.videoid}/></span>
this.switch(this.props.videoid)
);
}
}
export default Title;