JSX 中的 If 语句与 React

Question

我正在尝试从数组在 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>

应该完全省略。

如果此人没有电子邮件，则应省略电子邮件 link，如果 he/she 没有网站，则应省略此 link .

所以我的 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。

Answer 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>

Answer 2

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

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

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

JSX 中的 If 语句与 React

If statements inside JSX with React

javascript

jsx

reactjs

react-jsx

react-router