Question

我目前有此代码，在垃圾邮件中，它称为{image.processamento.result}

 renderImgs() {
const { images, loadingFetchImages } = this.state;
if (loadingFetchImages) {
  return <Loading />;
}
return images.map(image => (
    <div key={image.processamento.id} className="col-2">
      <div role="button" tabIndex={0} onKeyPress={() => this.checkImage(image.processamento.id)} onClick={() => this.checkImage(image.processamento.id)} className={`lista-img-validar ${image.check ? 'active' : ''}`}>
        <figure>
          <img src={image.public_url} id="image-authorize" className="img-responsive" alt="Imagem da prova" />
        </figure>
        <figcaption>
            <div className="col-12">
              <article className="text-left">
                <span className="validador-txt-destaque">{image.processamento.co_inscricao}</span>
              </article>
            </div>
            <div className="col-12">
              <article className="text-left mt-2">
                <span className="validador-txt-destaque-silver">Lote: </span>
                <span>{image.processamento.batch}</span>
              </article>
            </div>
            <div className="col-12">
              <article className="text-left mt-2">
                <span className="validador-txt-destaque-silver">Situação: </span>
                <span>{image.processamento.result}</span>
              </article>
            </div>                
        </figcaption>
      </div>
    </div>
));
}

{image.processamento.result}可以返回3个值，即“论文”，“不足”和“空白”，我要做的就是在向用户渲染图像时更改此名称，例如。我希望“空白”变为“ Sem texto”。

我很困惑，因为在退货中我不能使用条件条件（如其他条件），有人可以帮助我吗？

Answer 1

这样做。

<span>{image.processamento.result == "blank" ? "Sem texto" : image.processamento.result }</span>

Answer 2

renderImgs() {
const { images, loadingFetchImages } = this.state;
if (loadingFetchImages) {
  return <Loading />;
}

const getFriendlyName = function(name) {
    if(name == "blank"){
      return "Sem texto
    }
    return name
}

return images.map(image => (
    <div key={image.processamento.id} className="col-2">
      <div role="button" tabIndex={0} onKeyPress={() => this.checkImage(image.processamento.id)} onClick={() => this.checkImage(image.processamento.id)} className={`lista-img-validar ${image.check ? 'active' : ''}`}>
        <figure>
          <img src={image.public_url} id="image-authorize" className="img-responsive" alt="Imagem da prova" />
        </figure>
        <figcaption>
            <div className="col-12">
              <article className="text-left">
                <span className="validador-txt-destaque">{image.processamento.co_inscricao}</span>
              </article>
            </div>
            <div className="col-12">
              <article className="text-left mt-2">
                <span className="validador-txt-destaque-silver">Lote: </span>
                <span>{image.processamento.batch}</span>
              </article>
            </div>
            <div className="col-12">
              <article className="text-left mt-2">
                <span className="validador-txt-destaque-silver">Situação: </span>
                <span>{getFriendlyName(image.processamento.result)}</span>
              </article>
            </div>                
        </figcaption>
      </div>
    </div>
));
}

Answer 3

您可以通过多种方式做到这一点，我认为您可以通过以下正确方式做到这一点：

const status = [
   blank:"some blank text",
   essay:"some essay text",
   inssuficient:"some inssuficient text"
];
<span>{status[image.processamento.result]}</span>

Answer 4

三元运算符在JSX中至关重要。它们也可以链接起来，就像if / elses一样，

这将是有效的：

<span>{image.processamento.result === 'blank' ? "Sem texto" : image.processamento.result === 'insufficient' ? 'Não suficiente' : image.processamento.result }</span>

当然，在将jsx标记返回到if语句之前，所有这些都可以抽象。在您的map内部，您只需要执行显式的返回，而不是简写的返回，并在此之前声明一个表示结果的变量。但这实际上只是一个偏好问题。

在React中更改字段名称

4 个答案: