javascript - react map 功能如果其他条件

Question

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

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

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

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 power 你可以像这样在渲染中的 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>
  );
}