javascript - 如何根据 API 中的数据在两个 ui 容器之间进行选择 [React TypeScript]

Question

所以我正在开发一个控制面板，用于显示来自 API 源的不同视频/帖子。我有一个卡片 div，显示视频帖子(缩略图+文本)，然后我有第二个卡片 div，显示更多基于文本的帖子。

两者的代码如下:

  <div className="">
    <Link className="styledLink" to={`adminhelpcard/${this.state.id}`}>
      <div className="card">
        <h5 className="card-header">{this.state.title}</h5>

        <div>
          <img
            className="Sprite"
            onLoad={() => this.setState({ imageLoading: false })}
            onError={() => this.setState({ tooManyRequests: true })}
            src={this.state.thumbnail}
            style={
              this.state.tooManyRequests
                ? { display: "none" }
                : this.state.imageLoading
                ? { display: "null" }
                : { display: "null" }
            }
          />
        </div>
        <div>
          {this.state.tooManyRequests ? (
            <h6 className="mx-auto">
              <span className="badge badge-danger mt-2"></span>
            </h6>
          ) : null}
          <div className="card-body mx-auto">
            <h6 className="card-title">
              {this.state.title
                .toLowerCase()
                .split(" ")
                .map((letter) => letter.charAt(0).toUpperCase() + letter.substring(1))
                .join(" ")}
            </h6>
          </div>
        </div>
      </div>
    </Link>
    <div className="horizontalCard">
      <div className="innerCard">
        <div className="leftImage">
          <img
            className="Sprite"
            onLoad={() => this.setState({ imageLoading: false })}
            onError={() => this.setState({ tooManyRequests: true })}
            src={this.state.thumbnail}
            style={
              this.state.tooManyRequests
                ? { display: "none" }
                : this.state.imageLoading
                ? { display: "null" }
                : { display: "null" }
            }
          />
        </div>
        <div className="rightText">
          <div className="card-body">
            <h5 className="card-title">{this.state.title}</h5>
            <p className="card-text">...</p>
            <p className="card-text">...</p>
          </div>
        </div>
      </div>
    </div>
  </div>

这两个容器看起来像这样:

所以我的问题是，我怎样才能创建某种 if-else 语句来检测 api 何时提供缩略图链接，如果提供，那么它将提供一个缩略图容器，而如果它返回空，那么它将使用基于文本的容器。

Answer 1

我最终通过声明 if else 语句解决了这个问题

render() {
    const isThumbnail = this.state.thumbnail;
    return (
      <div>
        {isThumbnail ? (
          <div className="horizontalCard">
            <div className="innerCard">
              <div className="leftImage">
                <img
                  className="Sprite"
                  onLoad={() => this.setState({ imageLoading: false })}
                  onError={() => this.setState({ tooManyRequests: true })}
                  src={this.state.thumbnail}
                  style={
                    this.state.tooManyRequests
                      ? { display: "none" }
                      : this.state.imageLoading
                      ? { display: "null" }
                      : { display: "null" }
                  }
                />
              </div>
              <div className="rightText">
                <div className="card-body">
                  <h5 className="card-title">{this.state.title}</h5>
                  <p className="card-text">...</p>
                  <p className="card-text">...</p>
                </div>
              </div>
            </div>
          </div>
        ) : (
          <Link className="styledLink" to={`adminhelpcard/${this.state.id}`}>
            <div className="card">
              <h5 className="card-header">{this.state.title}</h5>

              <div>
                {this.state.tooManyRequests ? (
                  <h6 className="mx-auto">
                    <span className="badge badge-danger mt-2"></span>
                  </h6>
                ) : null}
                <div className="card-body mx-auto">
                  <h6 className="card-title">
                    {this.state.title
                      .toLowerCase()
                      .split(" ")
                      .map((letter) => letter.charAt(0).toUpperCase() + letter.substring(1))
                      .join(" ")}
                  </h6>
                </div>
              </div>
            </div>
          </Link>
        )}
      </div>
    );
  }