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

Question

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

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

但是，它仍然无法正常工作，因为它应该显示“无链接”，控制台日志显示正确。我将不胜感激任何帮助。

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: "[e-mail]", 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;

标签： javascriptreactjs

Answer 1

不需要 isEmail，使用 jsx 功能，您可以在渲染中控制 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>
  );
}