在 React 中更改字段名称答案

【问题标题】：Change fields names in React在 React 中更改字段名称
【发布时间】：2018-09-25 17:52:56
【问题描述】：

我目前有这段代码，在垃圾邮件中它调用 {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 个值，“essay”、“inssuficient”和“blank”，我要做的就是在将图像呈现给用户时更改这些名称，例如.我希望“空白”变成“Sem texto”。

我很困惑，因为在 return 中我不能使用 if else 等条件，有人可以帮助我吗？

【问题讨论】：

你检查过三元运算符吗？您可以在退货时使用它

标签： reactjs api

【解决方案1】：

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>
));
}

【讨论】：

【解决方案2】：

这样做。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

三元运算符在 JSX 中是必不可少的。它们也可以被链接起来，就像 if/else 一样，

这将是有效的：

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

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

【讨论】：