比较字符串时，ReactJS switch case only returns 默认

Question

我正在尝试让 span 在 prop 的条件下显示不同的内容。

道具 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;

比较字符串时，ReactJS switch case only returns 默认

ReactJS switch case only returns default when comparing strings

switch-statement

reactjs