在 JSX 中使用 React 的 If 语句答案

【问题标题】：If statements inside JSX with React在 JSX 中使用 React 的 If 语句
【发布时间】：2017-04-03 01:22:57
【问题描述】：

我正在尝试从数组中创建一个 React 列表。我已经做到了

const persons = [
  { name: 'A', website: 'http://google.com' },
  { name: 'B', email: 'b@google.com' },
];

const listItems = persons.map((person, i) =>
  <div className="card" key={i}>
    <div className="card-block">
      <h4 className="card-title">{person.name}</h4>
    </div>
    <ul className="list-group list-group-flush">
      <a href="{person.website}" className="list-group-item">{person.website}</a>
      <a href="mailto:{person.email}" className="list-group-item">{person.email}</a>
    </ul>
  </div>
);

const PersonList = () => (
  <div className="card-deck-wrapper">
    {listItems}
  </div>
);

问题在于数据各不相同，因此有些人没有电子邮件，有些人没有网站，有些人也没有。

所以如果一个人都没有，这个块

    <ul className="list-group list-group-flush">
      <a href="{person.website}" className="list-group-item">{person.website}</a>
      <a href="mailto:{person.email}" className="list-group-item">{person.email}</a>
    </ul>

应该完全省略。

如果此人没有电子邮件，则应省略电子邮件链接，如果他/她没有网站，则应省略此链接。

所以我的 JSX 中需要一些 if 语句。

我想要的是这样的

const listItems = persons.map((person, i) =>
  <div className="card" key={i}>
    <div className="card-block">
      <h4 className="card-title">{person.name}</h4>
    </div>
    if (person.website || person.email) {
      <ul className="list-group list-group-flush">
        if (person.website) {
          <a href="{person.website}" className="list-group-item">{person.website}</a>
        }
        if (person.email) {
          <a href="mailto:{person.email}" className="list-group-item">{person.email}</a>
        }
      </ul>
    }
  </div>
);

但它不是有效的 JSX。

【问题讨论】：

标签： javascript reactjs react-router react-jsx jsx

【解决方案1】：

您可以使用大括号 + && 来实现。

const listItems = persons.map((person, i) =>
  <div className="card" key={i}>
    <div className="card-block">
      <h4 className="card-title">{person.name}</h4>
    </div>
     {(person.website || person.email) &&
         <ul className="list-group list-group-flush">
           {person.website && <a href={person.website} className="list-group-item">{person.website}</a>}
           {person.email && <a href={"mailto:" + person.email} className="list-group-item">{person.email}</a>}
        </ul>
    }
  </div>
);

jsfiddle

const persons = [
  { name: 'A', website: 'http://google.com' },
  { name: 'B', email: 'b@google.com' },
  { name: "No Email No Website"}
];

const listItems = persons.map((person, i) =>
  <div className="card" key={i}>
    <div className="card-block">
      <h4 className="card-title">{person.name}</h4>
    </div>
     {(person.website || person.email) &&
         <ul className="list-group list-group-flush">
           {person.website && <a href={person.website} className="list-group-item">{person.website}</a>}
           {person.email && <a href={"mailto:" + person.email} className="list-group-item">{person.email}</a>}
   			 </ul>
    }
  </div>
);

const PersonList = () => (
  <div className="card-deck-wrapper">
    {listItems}
  </div>
);

ReactDOM.render(
  <PersonList />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

【讨论】：

【解决方案2】：

您可以使用三元运算符和条件运算符（&&、||、===、!=）来实现相同的效果

{ 
  (person.website || person.email) ? some View when condition is true
   : 
   some View when condition is false
}

【讨论】：

【解决方案3】：

if 语句不能使用 JSX 块，请使用三元运算符：

const listItems = persons.map((person, i) =>
  <div className="card" key={i}>
    <div className="card-block">
      <h4 className="card-title">{person.name}</h4>
    </div>
    {person.website || person.email ? (
      <ul className="list-group list-group-flush">
        {person.website ? <a href={person.website} className="list-group-item">{person.website}</a> : null}
        {person.email ? <a href={person.email} className="list-group-item">{person.email}</a> : null}
      </ul>
    ) : null}
  </div>
);

【讨论】：