Question

我试图让一个跨度在道具的条件下显示不同的内容。

道具 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 只在比较字符串时返回默认值

1 个答案: