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

因此，我正在开发一个控制面板，它可以显示来自API源的不同视频/帖子。我有一个显示视频帖子（缩略图+文本）的card div，还有一个card 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>

{this.state.title}
{this.state.tooManyRequests(
)：null}
{this.state.title
.toLowerCase（）
.拆分（“”）
.map（（字母）=>letter.charAt（0.toUpperCase（）+letter.substring（1））
.join（“”）
{this.state.title}

这两个容器看起来是这样的：

---

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

我通过声明这个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>
    );
  }

render（）{
const isThumbnail=this.state.thumbnail；
返回(
{是缩略图吗(
{this.state.title}


) : (
{this.state.title}
{this.state.tooManyRequests(
)：null}
{this.state.title
.toLowerCase（）
.拆分（“”）
.map（（字母）=>letter.charAt（0.toUpperCase（）+letter.substring（1））
.join（“”）
)}
);
}

我最终通过声明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>
    );
  }

render（）{
const isThumbnail=this.state.thumbnail；
返回(
{是缩略图吗(
{this.state.title}


) : (
{this.state.title}
{this.state.tooManyRequests(
)：null}
{this.state.title
.toLowerCase（）
.拆分（“”）
.map（（字母）=>letter.charAt（0.toUpperCase（）+letter.substring（1））
.join（“”）
)}
);
}

不过，这只是一个建议，您可以为您拥有的每个“容器”创建一个单独的组件，这样您就可以在此处使用较短的代码，并且在需要时可以重复使用。：）@threeFatCat我该怎么做呢？你可以检查一下，你将用img为容器的代码创建一个单独的文件，你将另一个命名为

和

，然后将数据作为道具传递。因此，您的代码将类似于：

{isThumbnail？：}

不过只是一个建议，您可以为您拥有的每个“容器”创建一个单独的组件，因此您可以在此处使用较短的代码，并且可以在需要时重复使用。：）@threeFatCat我该怎么做呢？你可以检查一下，你将用img为容器的代码创建一个单独的文件，你将另一个命名为

和

，然后将数据作为道具传递。因此，您的代码将类似于：

{isThumbnail？：}