Question

我正在尝试使用地图功能来添加条件以显示电子邮件链接。

如果项目包含电子邮件，请显示它。

但是，它仍然不起作用，因为它应该显示“ no link”，控制台日志显示正确。我将不胜感激。

import React, { Component } from 'react';

import listIcon from '../img/list-icon.svg';

class FaqList extends Component {
  state = {
    items: [
      { id: 1, name: "Lorem.", answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", email: "hello@email.com", expanded: false },
      { id: 2, name: "Lorem.", answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", expanded: false }
    ]
  };

  render() {
    let link;

    const isEmail = this.state.items.map(item => {
      if (item.email) {
        console.log(item.email); // showing email
        link = 'show link';
      } else {
        link = 'no link';
      }
    });

    return this.state.items.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
      >

        <div className="faq__content">
          <p className="mb-0">{el.answer}</p>

          {link} // Template here

        </div>
      </div>
    ));
  }

}

export default FaqList;

Answer 1

不需要isEmail，使用jsx功能，您可以在render中的map函数内部控制电子邮件链接的可见性，如下所示：

render() {
  return (
    <div>
      {this.state.items.map(el => (
        <div
          key={el.id}
          onClick={() => this.handleToggle(el.id)}
          className={
            el.expanded
              ? 'faq__columns--item--active faq__columns--item'
              : 'faq__columns--item'
          }
        >
          <div className="faq__content">
            <p className="mb-0">{el.answer}</p>
            {el.email && <div>email: {el.email}</div>}
          </div>
        </div>
      ))}
    </div>
  );
}

Answer 2

您已经在items方法中映射到render。您无需再次映射items即可根据是否存在email键来渲染某些UI，它可以在您的主map中发生，就像这样（第38行））：https://codesandbox.io/s/great-tree-c12ks

Answer 3

尝试类似

import fetch from "node-fetch";

Answer 4

看起来您的link变量需要是一个对象，即：

{  
  1, 'show link',
  2, 'no link'},
  ...
}

...其中1，2，3 ...（键）是您商品的ID，因此您可以在渲染器中添加如下链接：{link[id]} // Template here 在这种情况下，这里有一个快速解决方法：

  const link = {};

  const isEmail = this.state.items.map(item => {
    if (item.email) {
      console.log(item.email); // showing email
      link[id] = 'show link';
    } else {
      link[id] = 'no link';
    }
  });

Answer 5

这是您要寻找的吗？

_render_email(obj){
obj.email && console.log(obj.email);
return (obj.email)? <div>obj.email</div> : null;
}

 render() {
    return this.state.items.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
      >

        <div className="faq__content">
          <p className="mb-0">{el.answer}</p>

          {
               this._render_email(el)                   
          } // -> modified 

        </div>
      </div>
    ));
  }

如果其他条件则反应地图功能

5 个答案: